сбросить проверки после сброса формы (ReactiveForms)

Question

HTML:

<form [formGroup]="locationForm" #myForm="ngForm" class="formContainer">

<div class="buttonContainer">
      <section class="btn1">
          <button 
          (click)="addAnotherMethod()"
          mat-raised-button 
          color="primary"> Add another method </button>
      </section>

      <section>
          <button
          (click)="addAnotherLocation()"
          mat-raised-button 
          color="primary"> Add another location </button>
      </section> 
    </div>

.TS файл

@ViewChild('myForm') currentLocationForm;

addAnotherLocation(): void{
    if(this.locationForm.valid){
      //send data to redux
      }))
    }
    this.currentLocationForm.resetForm()
  }

addAnotherMethod: void {
    if(this.locationForm.valid){
     //send data to redux
      }))
    }
    this.currentLocationForm.resetForm()
  }

С помощью приведенного выше кода я могу сбросить форму после того, как данные отправлены в Redx, но после сброса появятся сообщения об ошибках проверки в новой форме, в которых будут заполнены обязательные поля. Мне нужна помощь в использовании правильного метода для сброса этой формы и очистки проверки при отображении новой формы. Возможно, я также использую неправильный метод для вызова функций двух кнопок. Спасибо.

Answer 1

Если вы хотите вернуть форму в исходное состояние. Имеется в виду, прежде чем что-то было затронуто Пометить как нетронутый будет вашим лучшим выбором.

На самом деле markAsPristine будет делать то, что вы ожидаете, но также пересчитывает действительность на основе значений формы.

Сброс - это то, что должно как очистить форму, так и пометить ее так, как ее никогда не трогали Pristine

Так что в коде вы бы сделали что-то вроде.

this.locationForm.reset();

Что пометит группу from и всех ее детей как первозданную. Это эффективно сбросило бы вашу форму и не должно иметь ошибок проверки.

Дайте мне знать, если это поможет!

Ex. https://angular -qv2mfx.stackblitz.io

Answer 2

В вашей форме есть 2 вещи: FormGroup и FormGroupDirective.Чтобы ошибки исчезли, вам нужно сбросить оба из них:

this.currentLocationForm.resetForm();
this.locationForm.reset();

См. этот пост для более подробной информации о причинах.