angularangular-materialangular-formsangular-validator

Make all input field pristine after submitting once


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>

Solution

  • 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(); 
        }
      }