Angular 5 FormGroup reset doesn’t reset validators

by

It (FormGroup) behaves correctly. Your form requires username and password, thus when you reset the form it should be invalid (i.e. form with no username/password is not valid).

If I understand correctly, your issue here is why the red errors are not there at the first time you load the page (where the form is ALSO invalid) but pop up when you click the button. This issue is particularly prominent when you’re using Material.

AFAIK, <mat-error> check the validity of FormGroupDirective, not FormGroup, and resetting FormGroup does not reset FormGroupDirective. It’s a bit inconvenient, but to clear <mat-error> you would need to reset FormGroupDirective as well.

To do that, in your template, define a variable as such:

<form [formGroup]="myForm" #formDirective="ngForm" 
  (ngSubmit)="submitForm(myForm, formDirective)">

And in your component class, call formDirective.resetForm():

private submitForm(formData: any, formDirective: FormGroupDirective): void {
    formDirective.resetForm();
    this.myForm.reset();
}

GitHub issue: https://github.com/angular/material2/issues/4190

More Related Contents:

  1. Angular 2 Checkbox Two Way Data Binding
  2. Detect click outside Angular component
  3. Angular 2 Remove Hash (#) from the URL
  4. Dynamically ADDING and REMOVING Components in Angular
  5. Angular2, what is the correct way to disable an anchor element?
  6. How to remove the previously selected option from a drop-down menu in a table?
  7. How to show split header in the material table having nested group of data in angular
  8. How to serve up images in Angular2?
  9. Binding select element to object in Angular
  10. (change) vs (ngModelChange) in angular
  11. Angular2 – Input Field To Accept Only Numbers
  12. How to load image (and other assets) in Angular an project?
  13. Spring Boot with AngularJS html5Mode
  14. mat-form-field must contain a MatFormFieldControl
  15. Using HTML anchor link #id in Angular 6
  16. Style not working for innerHTML in Angular [duplicate]
  17. How to convert input value to uppercase in angular 2 (value passing to ngControl)
  18. Angular 6: saving data to local storage
  19. Highlight the search text – angular 2
  20. How to pass data to dialog of angular material 2
  21. What does Angular 2 hashtags in template mean?
  22. How to render string with html tags in Angular 4+? [duplicate]
  23. Remove host component tag from html in angular 4
  24. Detecting real time window size changes in Angular 4
  25. How to translate HTML string to real HTML element by ng-for in Angular 2?
  26. Angular2 without hash in the url
  27. How to manually set focus on mat-form-field in Angular 6
  28. Get Angular2 routing working on IIS 7.5
  29. Angular Material Tab : Prevent tab change of mat-tab-group if the form in current tab is dirty
  30. Create tree view with horizontal and vertical lines showing the connectivity using css

Leave a Comment