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

Assign a value to ReplaySubject if it is currently devoid of any

Is it feasible to verify the accuracy of the return type of a generic function in Typescript?

What is the best way to utilize RxJs for streaming HostListener events?

Django and Angular combine to create a floral mapping feature that allows users to easily return to their task list

A Guide to Iterating Through Arrays of Objects Using TypeScript

Heroku deployment of Angular application encounters launching issue

Tips for adjusting the dimensions of images in the primeng editor

Trouble retrieving child structural directive within parent structural directive

Issue with loading React Router custom props array but custom string works fine

Using an Angular interface for an HTTP request: The statusText message reads as "Error: Unable to Determine."

Subscribe receives a value before it has been properly assigned

Guide to configuring a not null property in Typescript Sequelize:

When attempting to send a token from an account to a marketplace in ERC721, the transfer caller must either be the owner

Parallel Execution Issue with RxJS Observable forkJoin

Stop/continue a stopwatch Observable

Tips for storing an unmatched result in an array with a Regexp

Exploring the power of makeStyles in Material UI when combined with TypeScript

Built-in functionality to easily customize gradients within material-ui themes

The Primeng ConfirmDialog does not close when either the Yes, No, or Close(X) buttons are clicked

Unable to compile TypeScript files using gulp while targeting ES5