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