angular 5, reactive form- resetting a required form control does not reset the required error under the input

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?

But I want the affect of the red line under the input when the focus is out. — danda, Feb 06 '19 at 14:22
I couldn't reproduce, please create a [mcve] Best would be a stackblitz :) — AT82, Feb 06 '19 at 18:53

score 2 · Answer 1 · answered Feb 06 '19 at 16:51

2

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

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

answered Feb 06 '19 at 16:51

Paola Reyes

152
2
12

score 0 · Answer 2 · answered Feb 07 '19 at 03:58

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)])],
  });

score 0 · Answer 3 · answered May 20 '20 at 07:55

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)

angular 5, reactive form- resetting a required form control does not reset the required error under the input

3 Answers3