Angular Ionic响应式表单控件不显示问题求助

我在开发Angular/Ionic动态表单时遇到问题：页面仅显示Submit按钮，所有表单字段均不可见。该表单需实现用户输入每年的组数，以及每组对应的学生数功能。

模板代码 #

<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>

组件代码 #

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);
  }
}

问题排查与修复方案 #

1. 缺失formGroupName绑定 #

Angular需要明确的表单组绑定来关联FormArray中的每个FormGroup，在ion-item-group上添加[formGroupName]="yearIndex"：

<ion-item-group *ngFor="let year of getYearsControls(); let yearIndex = index" [formGroupName]="yearIndex">

2. 学生组FormArray未指定formArrayName #

渲染学生组的循环外层需要添加formArrayName="groups"，让内层控件能正确关联到对应的FormArray：

<!-- 在学生组循环外层添加 -->
<ion-list formArrayName="groups">
  <ion-item *ngFor="let group of getGroupsControls(yearIndex); let groupIndex = index">
    <!-- 原有内容 -->
  </ion-item>
</ion-list>

3. 调整表单初始化时机 #

将addYearsControls()移到ngOnInit中执行，符合Angular生命周期最佳实践，避免时序问题：

ngOnInit() {
  this.addYearsControls();
}

constructor(private formBuilder: FormBuilder) {
  this.inputForm = this.formBuilder.group({
    years: this.formBuilder.array([])
  });
  console.log('inputForm initialized:', this.inputForm);
}

4. 修正formControlName绑定语法 #

学生组的formControlName需使用方括号绑定，而非插值表达式：

<ion-input type="number" [formControlName]="groupIndex" placeholder="Number of students"></ion-input>

内容的提问来源于Stack Exchange，提问作者blulow