动态创建 formArray

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

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

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

<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 测试有效性。

这是一个最小的 stackblitz，演示了您的代码可以正常工作：

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

动态创建 formArray

Dynamically formArray creating

ionic3

angular5

angular4-forms