Angular форма сброса материала после отправки - PullRequest
Новая
       20

Angular форма сброса материала после отправки

0 голосов
/ 29 марта 2020

Я использую angular материал и у меня есть форма с реактивной проверкой.

Я хочу сбросить форму после отправки, моя проблема после отправки, я вижу, что мои ошибки появляются в форме.

пример ввода: 

<mat-form-field>
  <mat-label>Prénom</mat-label>
  <input matInput name="prenom" formControlName="prenom">
  <mat-error *ngIf="f.prenom.hasError('required') && submitted">
    Ce champ est obligatoire
  </mat-error>
  <mat-error *ngIf="f.prenom.errors?.maxlength && !f.prenom.hasError('required')">
    le prénom ne peut pas dépasser 20 caractères
  </mat-error>
</mat-form-field>

Я пытался добавить отправленную переменную и this.myForm.markAsUntouched (), но дозы не работают 

onSubmit() {
  this.submitted = true;
  if (this.myForm.invalid) {
    return;
  }
  alert('Form Submitted succesfully!!!\n Check the values in browser console.');
  console.table(this.myForm.value);
  this.submitted = false;
  this.myForm.reset();
  this.myForm.markAsUntouched();
}

В представленной переменной я вижу ошибка сообщения исчезнет (желтая часть ниже), но не рамка и красный цвет.

enter image description here

У вас, ребята, есть какие-нибудь идеи, чтобы решить эту проблему?

1 Ответ

0 голосов
/ 31 марта 2020

Я смог решить эту проблему, поставив # formDirective = "ngForm" в теге формы 

<form [formGroup]="myForm" (ngSubmit)="onSubmit()" #formDirective="ngForm">

И объявив 

@ViewChild('formDirective') private formDirective: NgForm;

Затем вы можете поставить .resetForm ()

...