Динамически создавая formArray - PullRequest
Новая
       18

Динамически создавая formArray

0 голосов
/ 11 мая 2018

У меня есть название группы 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)
    })
  }

here is my error picture

1 Ответ

0 голосов
/ 14 мая 2018

Как отмечается в комментариях, ваша проблема заключается в том, что вы подписываетесь на изменения формы, что затем добавляет в форму дополнительные данные, которые инициируют изменения формы и т. Д., Пока не будет достигнут предел стека.

Без дальнейшего контекста вашего варианта использования я бы предложил удалить подписку для изменения формы и вместо этого добавить кнопку для добавления нового ученика в список, которую можно отключить, если текущая форма не действительна (аналогично логика, которая у вас уже есть на месте): 

<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 для проверки правильности, прежде чем разрешить добавление нового студента.

Вот минимальный стек, демонстрирующий работу вашего кода без ошибки:

...