angular: FormGroup reset() doesn't reset custom form control

I’m using this workaround, going into each control and calling control.setErrors(null); This is because md-form-field was leaving a red glow on the control after submitting

  static resetForm(formGroup: FormGroup) {
    let control: AbstractControl = null;
    formGroup.reset();
    formGroup.markAsUntouched();
    Object.keys(formGroup.controls).forEach((name) => {
      control = formGroup.controls[name];
      control.setErrors(null);
    });
  }

for me the form.reset() works, but if I call it inside the response of a request, the form will clear but the errors appear

This works, try this you need to reset the formDirective otherwise it will not 100% resting the form

Template:

<form 
  ...
  #formDirective="ngForm" 
>

Component:

import { ViewChild, ... } from '@angular/core';
import { NgForm, ... } from '@angular/forms';

export class MyComponent {
 ...
 @ViewChild('formDirective') private formDirective: NgForm;

  constructor(... )

  private someFunction(): void { 
    ...
    formDirective.resetForm();
  }
}

I even tried creating the form again - but still no luck. If you use .reset() the form will still remain in the _touched: true state hence the required fields will start from their invalid state. Tried calling markAsUntouched() and markAsPristine() as well individually, but the problem persist. Can this be reopened?

Since I could not get the original plnkr running, I have created a new stackblitz to confirm the issue. Here is what I see:

When the form loads:

After typing something in both inputs and hitting the reset button:

Notice how the normal control’s properties are all reset to its original state. However, the custom control properties are not reset properly. I believe this is the underlying issue described above.

@pavandixit93 Not yet. I apologize for the delay. I will review this again.

Is there another workaround instead of recreating form?

for (let control in this.form.controls) { this.form.controls[control].setErrors(null); }

The form is still valid, and the submit button is enabled… if we have something like:

<button type="submit" [disabled]="formInstance.status === 'INVALID'">GO</button>

@kaito0228 it work, the missing part is:

formGroup.setErrors({ 'invalid': true });

resetForm(formGroup: FormGroup) {
    let control: AbstractControl = null;
    formGroup.reset();
    formGroup.markAsUntouched();
    Object.keys(formGroup.controls).forEach((name) => {
      control = formGroup.controls[name];
      control.setErrors(null);
    });
    formGroup.setErrors({ 'invalid': true });
  }

"@angular/forms": "~7.2.0"

@sonukapoor It exists I just opened it. The code is there on the left side.

I’m using this workaround, going into each control and calling control.setErrors(null); This is because md-form-field was leaving a red glow on the control after submitting

  static resetForm(formGroup: FormGroup) {
    let control: AbstractControl = null;
    formGroup.reset();
    formGroup.markAsUntouched();
    Object.keys(formGroup.controls).forEach((name) => {
      control = formGroup.controls[name];
      control.setErrors(null);
    });
  }

But then form will become valid, even though it is not

Check your angular version in the chrome console by typing angular.version. If it is > 1.7.* then try downgrading your angular version to 1.4.14. This worked for me. Else, longer way but foolproof, set up a polyfills because this is a versioning issue.

Ok this is my last post because this isn’t a chat but I’ll be available on gitter:

@mlc-mlapis yes ngModel always creates a control and only binds it to a form group if it can inject one.

@sharpmachine there is no ngModel on their custom input in that example.

Take a look at @ghetolay plunker http://plnkr.co/edit/1BhydChJgFiPSWCDFpjm?p=preview to explain the case.