处理格式清晰的必填字段-Angular

Question

Form containing a bunch of required fields are there. Here I am able to handle all validations and error messages perfectly. But when I clear the form, now error messaging displaying for mandatory filed's like "Field is mandatory". Here my expected behavior is when clear the form just form comes to the initial stage and not to validate any field.

I'm not getting any idea to handle this, So any idea or any suggestion is helpful for me. Thanks in advance.

At present, I am using Reactive forms and through a generic validator to handle validations like below.

Answer 1

You need to show error messages when:

(1) there is an error on a field AND

(2) the field is dirty or touched - in other words, when the field has not been tampered with. Initially a field is not dirty and not touched. When you change the value it becomes dirty. When you give the field focus and then it loses focus it is touched. I believe resetting the form like you describe should make all fields clean again and untouched.

Manage dirty and touched like this:

<label>
  First Name:
  <input formControlName="firstName" required> <!-- required is optional -->
</label>

<div *ngIf="firstName.invalid && (firstName.dirty || firstName.touched)" class="alert alert-danger">
  <div *ngIf="firstName.errors.required">Name required</div>
  <div *ngIf="firstName.errors.minlength">Name min length is 3</div>
</div>

Docs: https://angular.io/guide/form-validation