Angular Reactive Form submit and clear validation

Question

I have a reactive form

 <form [formGroup]="secondFormGroup">
      <ng-template matStepLabel>enter items</ng-template>
      <div style="display: flex; flex-direction: column;">
        <mat-form-field>
          <input matInput type="text" placeholder="category"  [(ngModel)]="newItem.CategoryName" formControlName="category"
          />
        </mat-form-field>
        <mat-form-field>
          <input matInput type="text" placeholder="sub category"  [(ngModel)]="newItem.SubCategoryName" formControlName="subCategory"
          />
        </mat-form-field>
        <mat-form-field>
          <input matInput type="text" placeholder="product"  [(ngModel)]="newItem.ProductName" formControlName="name"/>
        </mat-form-field>
        <mat-form-field>
          <input matInput  [(ngModel)]="newItem.Amount" type="number" min="0" placeholder="amount" formControlName="amount"
          />
        </mat-form-field>
        <mat-form-field>
          <input matInput  [(ngModel)]="newItem.Price" type="number" min="0" placeholder="price" formControlName="price"
          />
        </mat-form-field>
        <button mat-raised-button color="primary" (click)="AddNewProduct(newItem)" style="float: left; align-self: flex-end;">submit</button>
      </div>
    </form>

I initialize it like this:

 this.secondFormGroup = this._formBuilder.group({
  category: ['', Validators.required],
  subCategory: ['', Validators.required],
  name: ['', Validators.required],
  amount: ['', Validators.required],
  price: ['', Validators.required]
});

Upon clicking sumbit I call this method:

AddNewProduct(newProduct) {
if (this.secondFormGroup.valid) {
  //add product
  this.secondFormGroup.reset();
 } 
}

After adding the product, I clear the form. However, once the form is cleared, it triggers the validation errors. I want the validation errors to show only when the user clicks submit and the form isn't valid, not when I clear the form after submitting.

How can I fix this?

user184994 · Accepted Answer · 2018-07-01 16:30:34Z

26

The issue seems to be that the form is marked as submitted after reset is called. If the form is marked as submitted, regardless of whether or not its pristine, the errors will be highlighted.

You'll need to call resetForm instead, which is on the FormGroupDirective:

@ViewChild(FormGroupDirective) formGroupDirective: FormGroupDirective;

this.formGroupDirective.resetForm();

Secondly, you'll need to wrap it in a setTimeout with a timeout of 0, so that the form is submitted before it resets.

setTimeout(() => this.formGroupDirective.resetForm(), 0)

I've tested this in a StackBlitz, and it all seems to work:

https://stackblitz.com/edit/angular-l6xq1d?file=src%2Fapp%2Fapp.component.ts

answered Jul 1, 2018 at 16:30

user184994

18.3k2 gold badges51 silver badges54 bronze badges

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

8 Comments

amitairos Over a year ago

Thanks. Although in my code, the form doesn't clear after calling resetForm. Why is this?

user184994 Over a year ago

Hard to say without seeing it. Do you get any errors in the console?

amitairos Over a year ago

Found the bug. I have another form. When I remove it, it works

amitairos Over a year ago

How do I access only the formGroupDirective of the second form?

user184994 Over a year ago

Give it an identifier, such as #myForm="ngForm", and then access it with @ViewChild('myForm') formGroupDirective: FormGroupDirective; instead

|

Akitha_MJ · Accepted Answer · 2019-01-08 14:05:18Z

3

This works, try this you need to reset the formDirective otherwise it will not 100% resting the form

Template:

<form 
  ...
  #formDirective="ngForm" 
>

Component:

import { ViewChild, ... } from '@angular/core';
import { NgForm, ... } from '@angular/forms';

export class MyComponent {
 ...
 @ViewChild('formDirective') private formDirective: NgForm;

  constructor(... )

  private someFunction(): void { 
    ...
    formDirective.resetForm();
  }
}

answered Jan 8, 2019 at 14:05

Akitha_MJ

4,31429 silver badges20 bronze badges

Comments

Amit Chigadani · Accepted Answer · 2018-07-01 15:37:25Z

0

You can easily clear the validators of form using clearValidators()

this.secondFormGroup .clearValidators();
this.secondFormGroup .updateValueAndValidity();

But this will remove the validators from the actual form group, and it will not show errors on form submit from the next time.

Better way to do is :

You could simply use flag on the error template, to display the errors based on form submit/reset. And set/reset the flag accordingly.

public formSubmitted = false;

onSubmit(){
   this.formSubmitted = true;
}

reset(){
   this.formSubmitted = false;
}

template file

<div *ngIf="formSubmitted">
 display errors
</div>

edited Jul 1, 2018 at 15:37

answered Jul 1, 2018 at 15:29

Amit Chigadani

29.9k14 gold badges88 silver badges102 bronze badges

2 Comments

amitairos Over a year ago

Thanks, but I don't want to just show or hide an element for the error. I want to mark the fields red like the default style does.

Amit Chigadani Over a year ago

I have added more description onto what will happen, if you clear the validators. Please check that.

Antoniossss · Accepted Answer · 2018-07-01 16:33:56Z

0

If you are using Angular Material inputs, then you can hide error state by setting inputs as untouched. Material input fields shows error status only if input is touched.

So

this.secondFormGroup.markAsUntouched();

should do the trick.

You may have to initiate change detection run after such operation (depends on scenario)

Here you have proof of concept. Input is initially in error state. Dedicated button clears this state untill future input.

https://stackblitz.com/edit/angular-tadkmb?file=src%2Fapp%2Fapp.component.ts

edited Jul 1, 2018 at 16:33

answered Jul 1, 2018 at 15:47

Antoniossss

32.7k7 gold badges67 silver badges119 bronze badges

9 Comments

user184994 Over a year ago

Actually, calling reset marks them as pristine anyway

Antoniossss Over a year ago

@user184994 good to know, thanks for feedback. But wait, OP is stating that he resets form..

Antoniossss Over a year ago

@amitairos ofc it work, its just you that dont know how to use it. Stating "not work" means nothing to me as there may be 10000 reasons why it is not working in your case. I can only guess that you need to run change detection like I have stated in last sentence.

amitairos Over a year ago

@Antoniossss Tried using change detection, and it still shows the errors.

Antoniossss Over a year ago

Please create stackblitz for us, it will be much more simpler

|

Collectives™ on Stack Overflow

Angular Reactive Form submit and clear validation

4 Answers 4

8 Comments

Comments

2 Comments

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

8 Comments

Comments

2 Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related