角离子反应形式：形式不显示

Question

我的 Angular/Ionic 表单遇到问题，无法在网络上正确显示表单控件。目前，我正在尝试实现一个动态表单，用户可以在其中输入每年的小组和学生数量。但是，当我在浏览器中查看表单时，我只能看到“提交”按钮，但没有任何表单字段可见。

这是我的代码：

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

我已经设置了一个 FormGroup，其中包含多年来的 FormArray，并且在每年内，都有一个用于团体的 FormArray 和用于团体和学生数量的单独表单控件。

我已经仔细检查了我的组件逻辑和模板绑定，但我似乎无法弄清楚为什么表单控件没有在 Ionic 组件中呈现。

任何有关如何解决此问题的帮助或建议将不胜感激。谢谢！

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

Answer 1

1. 使用

   [formGroupName]="yearIndex"

   迭代

   year

   形成组时，您会错过

   getYearsControls()

   。

2. 在通过

   formArrayName="groups"

   生成每个组

   FormControl

   之前，您错过了

   getGroupsControls(yearIndex)

   。

<form [formGroup]="inputForm" (ngSubmit)="onSubmit()">
  <ion-list formArrayName="years">
    <ion-item-group
      *ngFor="let year of getYearsControls(); let yearIndex = index"
      [formGroupName]="yearIndex"
    >
      <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>
      <ng-container formArrayName="groups">
        <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>
      </ng-container>
    </ion-item-group>
  </ion-list>
  <ion-button type="submit" expand="block">Submit</ion-button>
</form>

演示@StackBlitz