Добавление новой FormGroup в FormArray имеет ошибки после отправки формы и сброса

Question

В моем приложении Angular у меня есть форма с несколькими текстовыми полями, а также FormArray, где каждый элемент представляет собой FormGroup, представляющую строку полей. Этот FormArray имеет 1 FormGroup при запуске, и можно добавить больше, нажав кнопку. Также в форме есть кнопка отправки, которая не должна быть активирована, пока не будут заполнены все поля. После отправки формы я хочу вызвать веб-службу, сбросить форму и удалить ошибки полей, что я успешно делаю. Однако после отправки формы я нажимаю кнопку, чтобы добавить строку в мой FormArray, и все поля формы для этой новой FormGroup выделяются красным. Кнопка отправки также включена, но я ожидаю, что она будет отключена, поскольку все поля формы не были заполнены. Есть идеи, как решить эту проблему?

Я включил ссылку StackBlitz, чтобы продемонстрировать это на https://stackblitz.com/edit/angular-ahnmv3

Answer 1

Вам нужно просто повторно инициализировать форму после отправки формы. Я форкнул вашу демонстрацию на stackblitz. Вы можете увидеть на https://stackblitz.com/edit/angular-g1fme8

Answer 2

Вместо того, чтобы сбрасывать форму с помощью метода reset() класса FormGroup, используйте resetForm() из FormGroupDirective.

Сначала вам нужно получить ссылку на FormGroupDirective . Один из способов сделать это - поместить в форму ссылочную переменную шаблона и передать ее методу отправки:

<form [formGroup]="orderForm" #f="ngForm">
  ...

  <button (click)="submitForm(f)" 
          [disabled]="orderForm.invalid">
    Submit Form
  </button>

</form>

И в вашем ts-файле:

submitForm(f: FormGroupDirective): void {
  const items = this.orderForm.get("items") as FormArray;
  items.controls = [];
  this.addItem();

  f.resetForm(); // => instead of this.orderForm.reset()

  // There's no need to call the below method
  // this.clearErrorsFromFormGroup(this.orderForm);
}