Make all input field pristine after submitting once

Question

I have an angular form, I want to mark all input fields pristine and submit button disabled after submitting once. Simply when this page loads for the first time like that.

<form class="example-form" [formGroup] = "form" (ngSubmit) = "onSubmit()">
            <div class="inputs">
                 <h3>Create Product</h3>
                <div>
                    <mat-form-field class="example-full-width">
                        <mat-label>Product Name*</mat-label>
                        <input matInput 
                           formControlName = "productName"
                        >
                      </mat-form-field>
                       <br>
                      <div class="errorField" *ngIf = "form.get('productName').touched && 
                       form.get('productName').errors?.required" > Product name is required</div>
                </div>

                <mat-checkbox value = "checked" (change)="addAnother(checked)">Add Another</mat-checkbox>
                <br><br>
                <div class="buttons">
                    <button type="button" routerLink = "/products" class="back" mat-raised- 
                          button>Back</button>
                    <button
                      [disabled] = "!form.valid"
                    mat-raised-button>Save</button>
                </div>
            </div> 
      </form>

score 1 · Answer 1 · answered May 15 '20 at 17:21

1

You could use formGroup.markAsPristine():

onSubmit () {
 this.formGroup.markAsPristine();
 this.hasSubmitted = true;
}

and in your template

<!-- ... -->

<button
  [disabled] = "!form.valid || hasSubmitted"
  mat-raised-button>
  Save
</button>

<!-- ... -->

answered May 15 '20 at 17:21

Andrei Gătej

8,356
1
7
24

Still, there are some problems remain. I can't make untouched. this.form.markAsUntouched() is not working. Could you tell me how can I do that? And this.hasSubmitted is not working. – Md. Rubel Mia May 15 '20 at 17:54
Could you elaborate a bit? `markAsUntouched()` should be working, mainly if applied from the `root`. Also, what part of `hasSubmitted` does not work ? – Andrei Gătej May 15 '20 at 17:57
In my form, I applied two validations required and touched. So, after clicking the save button once I want to make my all fields untouched and pristine so that it becomes like initial form. So in onSubmit(), I wrote this.form.markAsPristine(), this.formGroup.markAsUntouched() but still all the fields are red. Though my error div is not displayed but input fields are red. – Md. Rubel Mia May 15 '20 at 18:07
Replace pristine and untouched calls with: this.form.reset(). Does it work ? – Andrei Gătej May 15 '20 at 18:15
No same problem. The input fields are red. It is not going to like the initial state. – Md. Rubel Mia May 15 '20 at 18:20

score 1 · Accepted Answer · answered May 15 '20 at 17:53

1

I suppose that you can reset the form and remove the validation status

1- You need to get the FormGroupDirective

 @ViewChild(FormGroupDirective, { static: false }) formDirective: FormGroupDirective;

2- Reset the form and validation disappears

  onSubmit() {
    if (this.form.valid) {
      // Remove the state of validation
      this.formDirective.resetForm(); 
    }
  }

answered May 15 '20 at 17:53

Moises Leonor

119
6

After applying this my error div is not showing but one problem remains, I don't know why all the input fields become red. I am using the angular material form. Could you tell me why all the fields are still red? – Md. Rubel Mia May 15 '20 at 18:10
The input field become red when a validation is invalid. When you submit the form the input become red and you can avoid it using **this.formDirective.resetForm()** and you can customize the behavior of validation using [ErrorStateMatcher](https://material.angular.io/components/input/overview#changing-when-error-messages-are-shown) – Moises Leonor May 15 '20 at 18:54

Make all input field pristine after submitting once

2 Answers2