I'm currently experiencing an issue with my Angular/Ionic form, where the form controls are not displaying correctly on the web. My goal is to create a dynamic form that allows users to input the number of groups and students for each year. However, when I view the form in the browser, I can only see the "Submit" button, but none of the form fields are visible.
Below is the code I am working with:
<form [formGroup]="inputForm" (ngSubmit)="onSubmit()">
<ion-list formArrayName="years">
<ion-item-group *ngFor="let year of getYearsControls(); let yearIndex = index">
<ion-header>
<ion-label>Year {{ yearIndex + 1 }}</ion-label>
</ion-header>
<ion-item>
<ion-label>Number of groups</ion-label>
<ion-input type="number" formControlName="numGroups" placeholder="Number of groups"></ion-input>
</ion-item>
<ion-item *ngFor="let group of getGroupsControls(yearIndex); let groupIndex = index">
<ion-label>Number of students</ion-label>
<ion-input type="number" formControlName={{groupIndex}} placeholder="Number of students"></ion-input>
<ion-button (click)="removeStudents(yearIndex, groupIndex)" color="danger" fill="clear">Remove Students</ion-button>
</ion-item>
<ion-item-divider>
<ion-button (click)="addStudents(yearIndex)" expand="block">Add Number of Students</ion-button>
</ion-item-divider>
</ion-item-group>
</ion-list>
<ion-button type="submit" expand="block">Submit</ion-button>
</form>
I have created a FormGroup that includes a FormArray for the years, and each year contains a FormArray for groups, along with individual form controls for the number of groups and students.
While I have checked my component logic and template bindings, I am unable to identify why the form controls are not rendering within the Ionic components.
If you have any suggestions or solutions to help me resolve this issue, I would greatly appreciate it. Thank you!
export class TestFormComponent implements OnInit {
@Output() formDataSubmitted = new EventEmitter<any>();
inputForm!: FormGroup;
constructor(private formBuilder: FormBuilder) {
this.inputForm = this.formBuilder.group({
years: this.formBuilder.array([])
});
this.addYearsControls();
console.log('inputForm initialized:', this.inputForm);
}
ngOnInit() {}
addYearsControls() {
const yearsFormArray = this.inputForm.get('years') as FormArray;
for (let i = 0; i < 5; i++) {
yearsFormArray.push(this.createYearGroup());
}
}
createYearGroup(): FormGroup {
return this.formBuilder.group({
numGroups: ['', Validators.required],
groups: this.formBuilder.array([])
});
}
addStudents(yearIndex: number) {
const yearGroupsArray = (this.inputForm.get(`years.${yearIndex}.groups`) as FormArray);
yearGroupsArray.push(this.createGroupControl());
}
removeStudents(yearIndex: number, groupIndex: number) {
const yearGroupsArray = (this.inputForm.get(`years.${yearIndex}.groups`) as FormArray);
yearGroupsArray.removeAt(groupIndex);
}
createGroupControl(): FormControl {
return new FormControl('');
}
onSubmit() {
this.formDataSubmitted.emit(this.inputForm.value);
console.log(this.inputForm.value);
}
getYearsControls() {
return ((this.inputForm.get('years') as FormArray).controls);
}
getGroupsControls(yearIndex: number) {
return ((this.inputForm.get(`years.${yearIndex}.groups`) as FormArray).controls);
}
}