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
– danda, Commented Feb 6, 2019 at 14:22
I couldn't reproduce, please create a minimal reproducible example Best would be a stackblitz :) — AVJT82
– AVJT82, Commented Feb 6, 2019 at 18:53

Paola Reyes · Accepted Answer · 2019-02-06 16:51:32Z

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 6, 2019 at 16:51

Paola Reyes

1622 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Palak Jadav · Accepted Answer · 2019-02-07 03:58:17Z

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

nirKa · Accepted Answer · 2020-05-20 07:55:58Z

0

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)

answered May 20, 2020 at 7:55

nirKa

2233 silver badges14 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related