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

1 个答案: