In Angular 5, when you reset a required form control in a reactive form, the required error message beneath the input field is not cleared

Question

In Angular 5, when you reset a required form control in a reactive form, the required error message beneath the input field is not cleared

Within my template, there is a form that becomes visible when a button is clicked-

     <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>

My component contains the following code-

  @ViewChild('formDirective') formDirective: FormGroupDirective;

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

Upon closing the form, I execute this function-

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

However, when I reopen the form, I notice an immediate red error under the input field.

I have also attempted the following-

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

Unfortunately, this solution did not work either.

Does anyone have any ideas on how to resolve this issue?

javascript angular typescript angular-reactive-forms

Answer 1

Answer №1

There was a time when I needed to reset the validators, so I utilized the code below:

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

Answer 2

There was a time when I needed to reset the validators, so I utilized the code below:

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

Answer 3

Answer №2

To make changes to your HTML template, simply remove the "required" attribute. If you want to show different error messages on focus out, you can try the following:

Here is the 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>

And here is the component.ts file:

 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 4

To make changes to your HTML template, simply remove the "required" attribute. If you want to show different error messages on focus out, you can try the following:

Here is the 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>

And here is the component.ts file:

 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 5

Answer №3

While this question may be dated, The answer provided could be useful for those facing a similar issue.

For those encountering this problem with the Angular material mat-stepper, the solution can be found in response to this question.

(This is why some individuals may have struggled to replicate the issue)

Answer 6

While this question may be dated, The answer provided could be useful for those facing a similar issue.

For those encountering this problem with the Angular material mat-stepper, the solution can be found in response to this question.

(This is why some individuals may have struggled to replicate the issue)

In Angular 5, when you reset a required form control in a reactive form, the required error message beneath the input field is not cleared

Answer №1

Answer №2

Answer №3

Similar questions

Discovering a method to recover information obtained through intercepting an observable

Using SimplyJS and XML: extracting the value of a specific key

When a const variable is declared within the composition-api setup(), it remains unchanged unless redeclared within the function scope

Extract the canvas code line from a function without using the eval function

What is the reasoning behind leaving out wwwroot from tsconfig?

I'm seeking clarification on the composition of Objects in Node.js

typescriptIn React Router v5 with TypeScript, an optional URL parameter is implemented that can have an undefined

Error message encountered when attempting to export functions in Reactjs, resulting in an undefined function error in the context of Reactjs

How can two unique links toggle the visibility of divs with two specific IDs?

Adjusting data points on a radar chart.js through user interaction

Is Angular's Http Module classified as middleware?

I'm looking for a streamlined method to simultaneously access multiple APIs with GraphQL and React

Live tweet moderation made easy with the Twitter widget

A guide on Implementing PastBack Functionality with AJAX Responses

Implementing server-side validation measures to block unauthorized POST requests

Is it possible for a Node.js server to specifically generate dynamic HTML, with Nginx handling the distribution of static data, and then automatically deliver the content to the client?

How come the hidden container does not reappear after I click on it?

Tips for transferring <form> information to an object array within a React application

Attributes of the host element in Angular 1.5 components

Using Material UI Slider along with Typescript for handling onChange event with either a single number or an