Угловая реактивная форма отправки и четкой проверки

Question

у меня реактивная форма

 <form [formGroup]="secondFormGroup">
      <ng-template matStepLabel>enter items</ng-template>
      <div style="display: flex; flex-direction: column;">
        <mat-form-field>
          <input matInput type="text" placeholder="category"  [(ngModel)]="newItem.CategoryName" formControlName="category"
          />
        </mat-form-field>
        <mat-form-field>
          <input matInput type="text" placeholder="sub category"  [(ngModel)]="newItem.SubCategoryName" formControlName="subCategory"
          />
        </mat-form-field>
        <mat-form-field>
          <input matInput type="text" placeholder="product"  [(ngModel)]="newItem.ProductName" formControlName="name"/>
        </mat-form-field>
        <mat-form-field>
          <input matInput  [(ngModel)]="newItem.Amount" type="number" min="0" placeholder="amount" formControlName="amount"
          />
        </mat-form-field>
        <mat-form-field>
          <input matInput  [(ngModel)]="newItem.Price" type="number" min="0" placeholder="price" formControlName="price"
          />
        </mat-form-field>
        <button mat-raised-button color="primary" (click)="AddNewProduct(newItem)" style="float: left; align-self: flex-end;">submit</button>
      </div>
    </form>

Я инициализирую это так:

 this.secondFormGroup = this._formBuilder.group({
  category: ['', Validators.required],
  subCategory: ['', Validators.required],
  name: ['', Validators.required],
  amount: ['', Validators.required],
  price: ['', Validators.required]
});

После нажатия кнопки sumbit я вызываю этот метод:

AddNewProduct(newProduct) {
if (this.secondFormGroup.valid) {
  //add product
  this.secondFormGroup.reset();
 } 
}

После добавления товара я очищаю форму. Однако, как только форма очищена, она вызывает ошибки проверки. Я хочу, чтобы ошибки проверки отображались только тогда, когда пользователь нажимает кнопку «Отправить», а форма недействительна, а не когда я очищаю форму после отправки.

Как я могу это исправить?

Answer 1

Это работает, попробуйте это, вам нужно сбросить formDirective , иначе он не будет 100% отдыхать форму

Шаблон:

<form 
  ...
  #formDirective="ngForm" 
>

Компонент:

import { ViewChild, ... } from '@angular/core';
import { NgForm, ... } from '@angular/forms';

export class MyComponent {
 ...
 @ViewChild('formDirective') private formDirective: NgForm;

  constructor(... )

  private someFunction(): void { 
    ...
    formDirective.resetForm();
  }
}

Answer 2

Если вы используете Angular Material входы, то вы можете скрыть состояние ошибки, установив входы как untouched. Поля ввода материала показывают состояние ошибки только при касании ввода.

So

this.secondFormGroup.markAsUntouched();

должен сделать трюк.

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

Здесь у вас есть подтверждение концепции. Вход изначально находится в состоянии ошибки. Выделенная кнопка очищает это состояние до ввода в будущем.

https://stackblitz.com/edit/angular-tadkmb?file=src%2Fapp%2Fapp.component.ts

Answer 3

Кажется, проблема в том, что форма помечается как отправленная после вызова перезагрузки. Если форма помечена как отправленная, независимо от того, является ли она нетронутой, ошибки будут подсвечены.

Вместо этого вам нужно будет позвонить resetForm, что указывается в FormGroupDirective:

@ViewChild(FormGroupDirective) formGroupDirective: FormGroupDirective;

this.formGroupDirective.resetForm();

Во-вторых, вам нужно обернуть его в setTimeout с тайм-аутом 0, чтобы форма отправлялась за до ее сброса.

setTimeout(() => this.formGroupDirective.resetForm(), 0)

Я проверил это в StackBlitz, и все, кажется, работает:

https://stackblitz.com/edit/angular-l6xq1d?file=src%2Fapp%2Fapp.component.ts

Answer 4

Вы можете легко очистить validators формы, используя clearValidators()

this.secondFormGroup .clearValidators();
this.secondFormGroup .updateValueAndValidity();

Но это удалит валидаторы из фактической группы форм и не отобразит errors при отправке формы в следующий раз.

Лучший способ сделать это:

Вы можете просто использовать флаг в шаблоне ошибок, чтобы отобразить ошибки на основе отправки / сброса формы. И установите / сбросьте флаг соответствующим образом.

public formSubmitted = false;

onSubmit(){
   this.formSubmitted = true;
}

reset(){
   this.formSubmitted = false;
}

файл шаблона

<div *ngIf="formSubmitted">
 display errors
</div>