Usage of formGroupDirective for reset form - Angular reactive form

1
votes

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. enter image description here

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.

2
angularangular-reactive-forms

2 Answers

8
votes

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

3
votes

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 = ...