I’m trying to reset a form after I’ve added a value.
Form Code Snippet
<code><form [formGroup]="addAttributeForm" fxLayout="column">
<mat-form-field>
<input matInput formControlName="title" placeholder="Title" required>
<mat-error>This field is required</mat-error>
</mat-form-field>
</form>
</code>
<code><form [formGroup]="addAttributeForm" fxLayout="column">
<mat-form-field>
<input matInput formControlName="title" placeholder="Title" required>
<mat-error>This field is required</mat-error>
</mat-form-field>
</form>
</code>
<form [formGroup]="addAttributeForm" fxLayout="column">
<mat-form-field>
<input matInput formControlName="title" placeholder="Title" required>
<mat-error>This field is required</mat-error>
</mat-form-field>
</form>
In the component
<code>onSubmit(form: FormGroup) {
// do work
form.reset();
}
</code>
<code>onSubmit(form: FormGroup) {
// do work
form.reset();
}
</code>
onSubmit(form: FormGroup) {
// do work
form.reset();
}
What I’m observing:
- The form values are set to empty.
- But the validation messages are still displayed from mat-error.
- I’ve tried
form.markAsPristine(),form.markAsUntouched()and combining all three.
How can I reset the form so the mat-error is not displayed?
The form group has no “knowledge” about whether the actual HTML form has been submitted or not. It only keeps track of the form values/validity/enabled state. So resetting the form group does reset the values but not any state regarding whether the form has been submitted.
To do this, you need to get a hold of the FormGroupDirective and call resetForm() on it.
Form Code Snippet
<code><form [formGroup]="addAttributeForm" fxLayout="column">
<!-- ... -->
</form>
</code>
<code><form [formGroup]="addAttributeForm" fxLayout="column">
<!-- ... -->
</form>
</code>
<form [formGroup]="addAttributeForm" fxLayout="column">
<!-- ... -->
</form>
In the component
<code>@ViewChild(FormGroupDirective) formDirective: FormGroupDirective;
onSubmit(form: FormGroup) {
// do work
this.formDirective.resetForm();
}
</code>
<code>@ViewChild(FormGroupDirective) formDirective: FormGroupDirective;
onSubmit(form: FormGroup) {
// do work
this.formDirective.resetForm();
}
</code>
@ViewChild(FormGroupDirective) formDirective: FormGroupDirective;
onSubmit(form: FormGroup) {
// do work
this.formDirective.resetForm();
}
4
This solution works with me.
You need to do next:
<code>formReset(form: FormGroup) {
form.reset();
Object.keys(form.controls).forEach(key => {
form.get(key).setErrors(null) ;
});
}
</code>
<code>formReset(form: FormGroup) {
form.reset();
Object.keys(form.controls).forEach(key => {
form.get(key).setErrors(null) ;
});
}
</code>
formReset(form: FormGroup) {
form.reset();
Object.keys(form.controls).forEach(key => {
form.get(key).setErrors(null) ;
});
}
This reset the form and clear all error.
1
The only way I’ve been able to successfully do this is by setting a flag to hide the form when you want to reset it and then using a timeout to set that flag back to true. As far as I know, there is no built-in way to do this yet.
<code>showForm = true;
reset(): void {
this.showForm = false;
setTimeout(() => this.showForm = true);
}
</code>
<code>showForm = true;
reset(): void {
this.showForm = false;
setTimeout(() => this.showForm = true);
}
</code>
showForm = true;
reset(): void {
this.showForm = false;
setTimeout(() => this.showForm = true);
}
And then in the HTML on the form element use *ngIf="showForm".