angular 5，reactive form-重置所需的表单控件不会重置输入下的所需错误

Question

In the template I have a form that is opened by pressing on a button-

     <form [formGroup]="person"
          (ngSubmit)="onSubmitNewPerson()"
          #formDirective="ngForm">

            <mat-form-field>
                <input matInput formControlName="firstName" required>
            </mat-form-field>

            <mat-form-field>
                <input matInput formControlName="lastName" #last required>
            </mat-form-field>
</form>

In the component I have this code-

  @ViewChild('formDirective') formDirective: FormGroupDirective;

 this.person = this.formBuilder.group({
            lastName: ['', Validators.required],
            firstName: ['', Validators.required]
        });

After closing the button I run this function-

   this.formDirective.resetForm();//hack that I saw in some question
    this.person.reset();

but after openning again the form, I immediatly see the red error under the input.

I also tried this-

    this.person.get('firstName').markAsUntouched();
   this.person.get('lastName').markAsUntouched();
     this.person.get('firstName').markAsPristine();
    this.person.get('lastName').markAsPristine();

But this does not work also.

Any idea how to fix it?

Answer 1

I used the following once when I wanted to reset the validators:

    this.person.get('firstName').clearValidators();
    this.person.get('firstName').updateValueAndValidity();

Answer 2

Simply remove required from your html template and if you want to display error message on focus out than try this to show different error message.

this is html template:

<div class="form-group">
        <label for="name" class="form-control-label">
        *Amount:
        </label>
        <input type="number" name="amount" class="form-control"  [formControl]="form.controls['amount']">
        <div>
        <small *ngIf="form.controls['amount'].hasError('required') && form.controls['amount'].touched" class="text-danger">
           Please enter an amount.
        </small>
        <small  *ngIf="form.controls['amount'].hasError('min') && form.controls['amount'].touched" class="text-danger">
             Your amount must be at least 0.01.
        </small>
        <small  *ngIf="form.controls['amount'].hasError('max') && form.controls['amount'].touched" class="text-danger">
                Your amount cannot exceed 999999.99.
        </small>
        </div>

This is component.ts

 import { FormGroup, FormBuilder, Validators} from '@angular/forms';

constructor(private fb: FormBuilder) {  }

this.form = this.fb.group({
    amount: [null, Validators.compose([Validators.required, Validators.min(0.01), Validators.max(999999.99)])],
  });

Answer 3

Although this question is slightly old, This answer may help people who have this issue.

If this problem occurs in the Angular material mat-stepper , you can see the solution offered for this question .

(That why some respondents were unable to reproduce the problem)