Reputation: 910
I am trying to find best way to reset angular reactive form. I'm bit confused for reset reactive forms and not able to find which method is for template driven forms and which is reactive forms.
Now I've used 'formGroupDirective' to reset but I'm getting console error like below.
this is how I have used formGroupDirective for reset.
Template file:
<form
...
#formDirective="formGroupDirective"
>
TS file:
import { ViewChild, ... } from '@angular/core';
import { FormGroupDirective, ... } from '@angular/forms';
export class MyComponent {
...
@ViewChild('formGroupDirective') private formGroupDirective: FormGroupDirective;
constructor(... )
private someFunction(): void {
...
formGroupDirective.resetForm();
}
}
Here I couldn't understand one thing, What is the difference between FormGroupDirective and FormDirective. And which one is preferable for reactive forms. And even we can reset through formGroup name like
this.formGroup.reset();
So If we can able to reset through formGroup name, then why we need to use directives. If any one have idea please help me to understand these differences.
Upvotes: 3
Views: 13089
Reputation: 149
If you're using Reactive Forms you can simply use the reset() method on the FormGroup to clear all the form values and mark the controls as pristine again, as it was pointed out already. But you can also use FormGroupDirective to use resetForm(), as this will mark the submitted property of the form as false, something the regular reset() method won't do.
This is especially helpful if you're using Angular Material, as the default ErrorStateMatcher will check whether the form has been submitted as one of the conditions to display the form error messages. You can use it like this:
@ViewChild(FormGroupDirective) formRef: FormGroupDirective;
And then:
this.formRef.resetForm();
No need to add anything to your HTML.
For more info: https://github.com/angular/angular/pull/10715
Upvotes: 14
Reputation: 60626
If you are doing reactive forms, you should already have a FormGroup
defined for the form in the component. Use reset on that. There is no reason to use a template reference variable in this case.
Here is one of mine:
ngOnInit(): void {
this.productForm = this.fb.group({
productName: ['', [Validators.required,
Validators.minLength(3),
Validators.maxLength(50)]],
productCode: ['', Validators.required],
tags: this.fb.array([]),
description: ''
});
}
displayProduct(product: Product): void {
if (this.productForm) {
this.productForm.reset();
}
// ...
}
I define the form group in the property productForm
and then use that property to call reset
.
My displayProduct
method is called each time the user selects a different product to edit. It resets the form and repopulates it with the data for the selected product.
This syntax:
#formDirective="formGroupDirective"
Is a template reference variable as indicated by the hash (#). This is often used in template-driven forms to access the form group since the form group is not defined in the code (as it is with reactive forms).
The FormGroupDirective
in reactive forms binds the form element in the HTML to the form group defined in the component code.
Mine looks like this:
<form novalidate
(ngSubmit)="saveProduct()"
[formGroup]="productForm">
Notice the [formGroup]
<-- The FormGroupDirective
It is set to productForm
, which is the name of my FormGroup
property defined in the component code:
this.productForm = ...
Upvotes: 4