Angular 4 reactive form is not clearing the validations after resetting the form

Question

I am using Angular 4.4.6 reactive form with Angular Material 2.0.0-beta.12 in my application. This is my component,

import { Component, OnInit } from \'@angu         


        

Answer 1

@AJT_82, we've modified a bit of your code dude.

<form [formGroup]="quickFileForm" (ngSubmit)="saveQuickFileForm(f)" #f="ngForm">

saveQuickFileForm(form) {
  console.log(this.quickFileForm);
  form.resetForm();
}

Eliminated @ViewChild, Seems to work also..BTW Thanks for the help! :)

Answer 2

Just in case nothing visually works for you, I did it via jquery:

$("#form .form-control").each((idx, ctrl)=>{$(ctrl).removeClass("is-invalid")});

Answer 3

This seems to be a known bug when having a button of type submit. There are some work-arounds presented in that issue, of which I would use the ngForm directive:

<form [formGroup]="quickFileForm" (ngSubmit)="saveQuickFileForm()" #f="ngForm">

TS:

@ViewChild('f') myForm;

saveQuickFileForm() {
  this.myForm.resetForm();
}

This seems to work fine! DEMO