In Angular 6, triggering a reset on a reactive form will activate all necessary validators

Question

In Angular 6, triggering a reset on a reactive form will activate all necessary validators

As a beginner in angular 6, I am currently facing an issue with resetting a form after submitting data.

Although everything seems to be functioning properly, when I reset the form after successfully submitting data to the database, it triggers all the required validators in the form.

Despite trying numerous approaches to resolve this, I have been unsuccessful in finding a solution.

My goal is to reset the form and all validators after each submission, before entering new data into the form fields for another submission.

Snippet from app.component.html:

<form [formGroup]="newMemberForm" (submit)="CreateMember(newMemberForm.value)" novalidate>
....
....
</form>

Snippet from app.component.ts:

            this.newMemberForm = this.formBuilder.group({
                  M_Number: ['', [Validators.required]],
                  F_Number: ['', [Validators.required]],
                  M_Name: ['', [Validators.required, Validators.minLength(4)]],
                  M_Status: ['', [Validators.required]],
                  M_Dob: ['', [Validators.required]],
                  M_Sex: ['', [Validators.required]],

                });

       CreateMember(memberForm) { 
        this.dmlService.CreateNewMember(memberForm).subscribe(data => {
              if (data[0]['RESPONSE'] == 'TRUE') 
         {
         this.newMemberForm.reset();
        }
       });
}

Even after resetting the form, the required validators are triggered. If I remove all the validators within the function above, the validations do not work when entering new form data.

I am seeking assistance in completely resetting all validators and the form after each submission, allowing me to submit the next set of form data smoothly.

If anyone could provide guidance on how to solve this issue, it would be greatly appreciated.

angular typescript material-design angular6

Answer 1

Answer №1

To reset, follow the steps below:

In your HTML file:

<form [formGroup]="newMemberForm" #formDirective="ngForm"  
(submit)="CreateMember(newMemberForm.value,formDirective)" novalidate>

In your TypeScript file:

CreateMember(value, formDirective: FormGroupDirective){
 ...
 formDirective.resetForm();
 this.myForm.reset();
}

It's important to note that Angular Material checks the validity of FormGroupDirective and not FormGroup, therefore resetting FormGroup will not reset FormGroupDirective.

You can find more information about this issue here: https://github.com/angular/material2/issues/9347

Answer 2

To reset, follow the steps below:

In your HTML file:

<form [formGroup]="newMemberForm" #formDirective="ngForm"  
(submit)="CreateMember(newMemberForm.value,formDirective)" novalidate>

In your TypeScript file:

CreateMember(value, formDirective: FormGroupDirective){
 ...
 formDirective.resetForm();
 this.myForm.reset();
}

It's important to note that Angular Material checks the validity of FormGroupDirective and not FormGroup, therefore resetting FormGroup will not reset FormGroupDirective.

You can find more information about this issue here: https://github.com/angular/material2/issues/9347

Answer 3

Answer №2

Although that solution is great, reactive forms offer a unique feature to achieve the same result.

In reactive forms, you can eliminate validations on specific formGroup/formcontrol by using clearValidators().

this.formGroup.clearValidators() or      
 this.formGroup.controls.controlName.clearValidators()

Following this step, it is important to update the form control with the removed validator.

this.formGroup.controls.controlName.updateValueAndValidity()

I utilized this method to resolve a similar issue, and I hope it proves helpful for you as well.

Answer 4

Although that solution is great, reactive forms offer a unique feature to achieve the same result.

In reactive forms, you can eliminate validations on specific formGroup/formcontrol by using clearValidators().

this.formGroup.clearValidators() or      
 this.formGroup.controls.controlName.clearValidators()

Following this step, it is important to update the form control with the removed validator.

this.formGroup.controls.controlName.updateValueAndValidity()

I utilized this method to resolve a similar issue, and I hope it proves helpful for you as well.

Answer 5

Answer №3

According to information provided in responses here and here, with additional details available in the official documentation:

The issue arises because FormGroup::reset() fails to clear the submitted state, which subsequently triggers validators that utilize ErrorStateMatchers.
The submitted status is monitored by a FormGroupDirective object. To resolve this, utilize FormGroupDirective::resetForm() to reset the form's states.
When using Angular Material, the default ErrorStateMatcher checks for form.submitted along with control.invalid and control.touched.
To address this, you have two options: either gain access to the directive and call resetForm(), or create a custom ErrorStateMatcher that excludes submission state checking, as demonstrated in the official documentation.

Option 1:

@Component({
  selector: '...',
  templateUrl: '...',
  styleUrls: '...'
})
export class MyCustomComponent {

  @ViewChild(FormGroupDirective) formGroupRef: FormGroupDirective | undefined;  // <<----

  myInputFormControl = new FormControl('', [Validators.required]);
  myFormGroup: FormGroup;

  constructor(private fb: FormBuilder, private myService: MyService) {
    this.myFormGroup = this.fb.group({
      myInput: this.myInputFormControl
    });
  }

  onSubmit(): void {
    if (this.myFormGroup.valid) {
      let myData: MyData = {
        myInput: this.myInputFormControl.value;
      }

      // submit form data to server
      this.myservice.submitData(myData).subscribe({
        next: (response) => {
          console.log('Data submitted successfully! Response: ', response);
          this.formGroupRef?.resetForm();               // <<----
        },
        error: (err) => {
          console.log("Errors while submitting data: ", err);
        }
      });
    }
  }
}

<form [formGroup]="myFormGroup" (submit)="onSubmit()">
  <input matInput type="text" [formControl]="myInputFormControl">
    <mat-error *ngIf="myInputFormControl.hasError('required')">
      Value is required
    </mat-error>
</form>

Option 2, utilizing a custom ErrorStateMatcher:

/** Error displayed when an invalid control is interacted with */
export class MyErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    return !!(control && control.invalid && control.touched);
  }
}

@Component({
  selector: '...',
  templateUrl: '...',
  styleUrls: '...'
})
export class MyCustomComponent {

  myInputFormControl = new FormControl('', [Validators.required]);
  myFormGroup: FormGroup;

  myMatcher = new MyErrorStateMatcher();

  constructor(private fb: FormBuilder, private myService: MyService) {
    this.myFormGroup = this.fb.group({
      myInput: this.myInputFormControl
    });
  }

  onSubmit(): void {
    // submit form data to server
    this.myFormGroup.reset();
  }
}

<form [formGroup]='myFormGroup' (submit)="onSubmit()">
  <input matInput type='text' [formControl]='myInputFormControl' [errorStateMatcher]='myMatcher'>
    <mat-error *ngIf='myInputFormControl.hasError('required')'>
      Value is required
    </mat-error>
</form>

Answer 6

According to information provided in responses here and here, with additional details available in the official documentation:

The issue arises because FormGroup::reset() fails to clear the submitted state, which subsequently triggers validators that utilize ErrorStateMatchers.
The submitted status is monitored by a FormGroupDirective object. To resolve this, utilize FormGroupDirective::resetForm() to reset the form's states.
When using Angular Material, the default ErrorStateMatcher checks for form.submitted along with control.invalid and control.touched.
To address this, you have two options: either gain access to the directive and call resetForm(), or create a custom ErrorStateMatcher that excludes submission state checking, as demonstrated in the official documentation.

Option 1:

@Component({
  selector: '...',
  templateUrl: '...',
  styleUrls: '...'
})
export class MyCustomComponent {

  @ViewChild(FormGroupDirective) formGroupRef: FormGroupDirective | undefined;  // <<----

  myInputFormControl = new FormControl('', [Validators.required]);
  myFormGroup: FormGroup;

  constructor(private fb: FormBuilder, private myService: MyService) {
    this.myFormGroup = this.fb.group({
      myInput: this.myInputFormControl
    });
  }

  onSubmit(): void {
    if (this.myFormGroup.valid) {
      let myData: MyData = {
        myInput: this.myInputFormControl.value;
      }

      // submit form data to server
      this.myservice.submitData(myData).subscribe({
        next: (response) => {
          console.log('Data submitted successfully! Response: ', response);
          this.formGroupRef?.resetForm();               // <<----
        },
        error: (err) => {
          console.log("Errors while submitting data: ", err);
        }
      });
    }
  }
}

<form [formGroup]="myFormGroup" (submit)="onSubmit()">
  <input matInput type="text" [formControl]="myInputFormControl">
    <mat-error *ngIf="myInputFormControl.hasError('required')">
      Value is required
    </mat-error>
</form>

Option 2, utilizing a custom ErrorStateMatcher:

/** Error displayed when an invalid control is interacted with */
export class MyErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    return !!(control && control.invalid && control.touched);
  }
}

@Component({
  selector: '...',
  templateUrl: '...',
  styleUrls: '...'
})
export class MyCustomComponent {

  myInputFormControl = new FormControl('', [Validators.required]);
  myFormGroup: FormGroup;

  myMatcher = new MyErrorStateMatcher();

  constructor(private fb: FormBuilder, private myService: MyService) {
    this.myFormGroup = this.fb.group({
      myInput: this.myInputFormControl
    });
  }

  onSubmit(): void {
    // submit form data to server
    this.myFormGroup.reset();
  }
}

<form [formGroup]='myFormGroup' (submit)="onSubmit()">
  <input matInput type='text' [formControl]='myInputFormControl' [errorStateMatcher]='myMatcher'>
    <mat-error *ngIf='myInputFormControl.hasError('required')'>
      Value is required
    </mat-error>
</form>

In Angular 6, triggering a reset on a reactive form will activate all necessary validators

Answer №1

Answer №2

Answer №3

Similar questions

Using default parameters in a versatile function

Rendering a component in React based on multiple conditions

JavaScript Enigma: Instantiate 2 Date variables with identical values, yet they ultimately display distinct dates on the calendar

Using parameters to create unions in TypeScript

Access to the server has been restricted due to CORS policy blocking: No 'Access-Control-Allow-Origin'

Setting up a Variable with an Object Attribute in Angular

Utilizing various filters and sorting options on API response within Angular 8

Utilizing Rxjs' distinct operator to perform deep object comparisons with nested values

TypeScript types for d3 version 4

ion-grid featuring alternate columns

The error `TypeError: Unable to access properties of an undefined value (reading 'authService')` occurred

To properly display a URL on a webpage using Angular, it is necessary to decode

Can one inherit under specific conditions?

What is the procedure for invoking a function when the edit icon is clicked in an Angular application

Using custom properties from the Material-UI theme object with custom props in Emotion styled components: a step-by-step guide

The path referenced in typings is incorrect

Bug in auto compilation in Typescript within the Visual Studios 2015

What is the Reason FormControl#valueChanges Subscriptions are Not Cleaned up by Garbage Collection?

Mastering Angular2: Leveraging TypeScript's Power to Unleash JavaScript ES6 Syntax with

Iterating through an array and setting variables according to asynchronous code