动态形成数组创建

Question

我有一个表单组名称studentRegistrationForm。在这种形式中，我想创建 动态studentList 数组，但我不能这样做。

ngOnInit(){
 this.studentRegistrationForm = this.formBuilder.group({
      session: ['', [Validators.required]],
      semester: ['', [Validators.required]],
      students: ['',[Validators.required]],
      studentList: this.formBuilder.array([
      ]),
    });

    let control = <FormArray>this.studentRegistrationForm.controls['studentList'];


    this.studentRegistrationForm.valueChanges
      .subscribe( data => {
        if(data.semester  && data.session && data.students){
          control.push(this.createStudent());
        }

      });
}

  createStudent() {
    return new FormGroup({
      id: new FormControl('', Validators.required),
      email: new FormControl('',Validators.required)
    })
  }

Answer 1

正如 cmets 中所述，您的问题是您订阅了表单更改，然后会向表单添加更多数据，从而触发表单更改，依此类推，直到达到堆栈限制。

如果没有进一步说明您的用例，我的建议是删除对表单更改的订阅，而是添加一个用于将新学生添加到列表的按钮，除非当前表单有效，否则您可以禁用该按钮（类似于您已经具备的逻辑）：

<div formArrayName="studentList" class="well well-lg">
    <div *ngFor="let student of students.controls; let i=index" [formGroupName]="i">
        <label for="id">ID:</label><input formControlName="id">
        <label for="id">EMail:</label><input formControlName="email">
    </div>
    <button type="button" (click)="doCreateStudent()" [disabled]="!studentRegistrationForm.valid">Add Student</button>
</div>

由于您已经为学期、会话和学生字段定义了验证器，因此您可以在允许添加新学生之前使用 studentRegistrationForm.valid 来测试有效性。

这是一个最小的堆栈闪电战，展示了您的代码在没有错误的情况下工作：

• https://stackblitz.com/edit/angular-vcfbyr