必须在索引处提供表单控件的值：0响应表单

Question

我正在尝试使用类服务填充formArray。在这种情况下，有students []和类metas。我的目的是选择班级，日期和所选班级的学生。它适合第一次选择（班级和日期），但我尝试重新选择它时出现错误 重新选择班级时会发生这种情况。

Error: Must supply a value for form control at index: 0.
at forms.js:5026
at forms.js:4971
at Array.forEach (<anonymous>)
at FormArray._forEachChild (forms.js:4966)
at FormArray._checkAllValuesPresent (forms.js:5019)
at FormArray.setValue (forms.js:4745)
at AttendenceFormComponent.<anonymous> (attendence-form.component.ts:43)
at Generator.next (<anonymous>)
at tslib.es6.js:73
at new ZoneAwarePromise (zone-evergreen.js:876)
at resolvePromise (zone-evergreen.js:797)
at new ZoneAwarePromise (zone-evergreen.js:879)
at Module.__awaiter (tslib.es6.js:69)
at AttendenceFormComponent.setClass (attendence-form.component.ts:42)
at Object.eval [as handleEvent] (AttendenceFormComponent.html:6)
at handleEvent (core.js:36772)
at callWithDebugContext (core.js:38390)
at Object.debugHandleEvent [as handleEvent] (core.js:38026)
at dispatchEvent (core.js:24335)
at core.js:26203

当我重新选择日期时会发生这种情况

ERROR Error: Must supply a value for form control at index: 0.
    at forms.js:5026
    at forms.js:4971
    at Array.forEach (<anonymous>)
    at FormArray._forEachChild (forms.js:4966)
    at FormArray._checkAllValuesPresent (forms.js:5019)
    at FormArray.setValue (forms.js:4745)
    at AttendenceFormComponent.setDate (attendence-form.component.ts:54)
    at Object.eval [as handleEvent] (AttendenceFormComponent.html:18)
    at handleEvent (core.js:36772)
    at callWithDebugContext (core.js:38390)

这是组件文件。

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, FormArray } from '@angular/forms';
import { StudentService } from 'src/app/services/student.service';
import { ClassService } from 'src/app/services/class.service';
import { en_US, zh_CN, NzI18nService } from 'ng-zorro-antd/i18n';

@Component({
  selector: 'app-attendence-form',
  templateUrl: './attendence-form.component.html',
  styleUrls: ['./attendence-form.component.scss']
})
export class AttendenceFormComponent implements OnInit {
  myForm;
  selectionClasses:any = [];
  selectedClass;
  classes:any = [];
  selectedDate;

  get attendence() {
    return this.myForm.get('attendence') as FormArray;
  }

  constructor(
    private fb: FormBuilder,
    private classService: ClassService) {

      this.myForm = this.fb.group({
        class: [''],
        date: [''],
        attendence: this.fb.array([])
      });

    }

   async ngOnInit() {
     this.classes = await this.classService.getClasses().toPromise();
     this.selectionClasses = await this.classService.getClasses().toPromise();
  }



  async setClass(data) {
    (this.myForm.get('attendence') as FormArray).setValue([]);

    this.selectedClass =  this.classes.find(_class => {
      return _class.id == data;
    });

    console.log(this.selectedClass);
  }

  setDate(date) {
    this.selectedDate = date;
    (this.myForm.get("attendence") as FormArray).setValue([]);
    console.log(this.selectedDate);
    console.log(this.attendence);

    this.selectedClass.students.map(student => {
      this.addStudentToForm(student.id, student.name, student.fname, this.selectedDate);
    });
  }

  addStudentToForm(id, name, fName, date){

    let student = this.fb.group({
      date: date,
      id: id,
      name: name,
      fName:fName,
      class:this.selectedClass.name,
      isPresent: [""]
    });

    this.attendence.push(student);
  }



  saveData(data){
    console.log(data);
  }
}

这是组件html文件

<form [formGroup]="myForm" (ngSubmit)="saveData(myForm.value)">
  <nz-form-item>
      <nz-form-label nzFor="class">Class</nz-form-label>
      <nz-form-control>
        <nz-select name="class"
        (ngModelChange)="setClass($event)" formControlName="class">
            <nz-option
            *ngFor="let class of selectionClasses"
            [nzValue]="class.id"
            [nzLabel]="class.name"
            ></nz-option>
        </nz-select>
      </nz-form-control>
    </nz-form-item >
  <nz-form-item>
    <nz-form-label nzFor="date">Date</nz-form-label>
    <nz-form-control>
        <nz-date-picker (ngModelChange)="setDate($event)" formControlName="date" [nzFormat]="yyyy/MM/dd"></nz-date-picker>
    </nz-form-control>
  </nz-form-item>

<nz-table #basicTable [nzData]="dataSet">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Address</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of basicTable.data">
      <td>{{data.name}}</td>
      <td>{{data.age}}</td>
      <td>{{data.address}}</td>
      <td>
        <a>Action 一 {{data.name}}</a>
        <nz-divider nzType="vertical"></nz-divider>
        <a>Delete</a>
      </td>
    </tr>
  </tbody>
</nz-table>


  <nz-form-item>
      <nz-form-label nzFor="date">Date</nz-form-label>
      <nz-form-control>
          <button type="submit">Submit</button>
      </nz-form-control>
    </nz-form-item>
</form>

我还没有实现表单数组。