Устранение ошибок поля при сбросе формы с помощью FormArray

Question

В моем приложении Angualar у меня есть форма с несколькими текстовыми полями, такими как идентификатор заказа и дата заказа. В моей форме также есть FormArray, где каждый элемент является FormGroup, представляющим строку полей. Этот массив форм имеет 1 FormGroup при запуске, и можно добавить больше, нажав кнопку. После отправки формы я хочу сбросить ее после получения успешного ответа от публикации данных в службе REST. Моя форма кода сброса выглядит следующим образом:

resetItems(): void {
  this.orderForm.reset();
  this.clearErrorsFromFormGroup(this.orderForm);
  let items = this.orderForm.get('items') as FormArray;
  items.controls = [];
  this.addItem();
  this.clearErrorsFromFormGroup(items.at(0) as FormGroup);


}

  private clearErrorsFromFormGroup(formGroup: FormGroup): void {
    Object.keys(formGroup.controls).forEach(key => {
      formGroup.controls[key].setErrors(null);
    });
  }

При выполнении указанных выше полей верхнего уровня, таких как идентификатор заказа и дата заказа, сбрасываются и не выделяются красным цветом, поскольку я удалил ошибки. Я хочу, чтобы мой массив форм был таким же, как при запуске с 1 элементом. Мой код очищает массив формы и добавляет элемент rowData. Затем я удаляю ошибки для rowData FormGroup. В пользовательском интерфейсе Все поля для этого rowData очищены, но они выделены красным, хотя я удалил ошибки. Кто-нибудь может помочь?

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

Answer 1

items - это FormArray, и способ очистки элементов управления не работает.

Проверьте этот код

 Object.keys(formGroup.controls).forEach(key => {
      formGroup.controls[key].setErrors(null);
    });

Представьте, что вы нажали items здесь ключ

formGroup.controls['item'] // this is a FormArray and 
// not FormControl so setErrors(null) won't work here

Один из способов исправить это - проверить экземпляр FormArray, затем выполнить итерацию по полю элементов управления, и вы можете использовать функции clearValidators и updateValueAndValidty.

   if (formGroup.controls[key] instanceof FormArray) {
         const control = formGroup.get(key) as FormArray;
        for (let i = 0; i < control.controls.length; i++) {
          const formGroup = control.controls[i] as FormGroup;
          Object.keys(formGroup.controls).forEach(field => {
            const control = formGroup.get(field);
            control.clearValidators();
            control.updateValueAndValidity();
          });
        }
      }

Вот демонстрация stackblitz: https://stackblitz.com/edit/angular-f7pflm?file=src%2Fapp%2Fapp.component.ts

Вот как ваш clearErrorsFromFormGroup woud теперь выглядит

private clearErrorsFromFormGroup(formGroup: FormGroup): void {
    Object.keys(formGroup.controls).forEach(key => {
      formGroup.controls[key].setErrors(null);
       if (formGroup.controls[key] instanceof FormArray) {
         const control = formGroup.get(key) as FormArray;
        for (let i = 0; i < control.controls.length; i++) {
          const formGroup = control.controls[i] as FormGroup;
          console.log('control', control);
          Object.keys(formGroup.controls).forEach(field => {
            const control = formGroup.get(field);
            control.clearValidators();
            control.updateValueAndValidity();
          });
        }
      }

    });
  }

Answer 2

Попробуйте использовать метод formGroup.updateValueAndValidity() после сброса