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 '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
    selector: 'app-quick-file',
    templateUrl: './quick-file.component.html',
    styleUrls: ['./quick-file.component.css']
})
export class QuickFileComponent implements OnInit {

    quickFileForm: FormGroup;


    constructor() { }

    ngOnInit() {
        this.initQuickFileForm();
    }

    private initQuickFileForm () {
        this.quickFileForm = new FormGroup({
            'fileOpenDate': new FormControl(new Date(), Validators.required),
            'fileSubjectEn': new FormControl(null, Validators.required),
            'categoryId': new FormControl(null, Validators.required),
            'subCategoryId': new FormControl(null),
            'primaryClientId': new FormControl(null, Validators.required),
            'primaryConsultantId': new FormControl(null, Validators.required)
        });
    }

    saveQuickFileForm() {
        console.log(this.quickFileForm);
        this.quickFileForm.reset();
    }

}

Here is my template,

<div>
    <form [formGroup]="quickFileForm" (ngSubmit)="saveQuickFileForm()">
        <mat-form-field class="common-form-field">
            <input matInput [matDatepicker]="openDatePicker" formControlName="fileOpenDate" placeholder="Choose Date">
            <mat-datepicker-toggle matSuffix [for]="openDatePicker"></mat-datepicker-toggle>
            <mat-datepicker #openDatePicker></mat-datepicker>
        </mat-form-field>

        <mat-form-field class="common-form-field">
            <input type="text" matInput formControlName="fileSubjectEn" placeholder="Subject in English">
        </mat-form-field>

        <mat-form-field class="common-form-field">
            <mat-select formControlName="categoryId" placeholder="Choose category">
                <mat-option value="1">opt 1</mat-option>
                <mat-option value="2">opt 2</mat-option>
                <mat-option value="3">opt 3</mat-option>
            </mat-select>
        </mat-form-field>

        <mat-form-field class="common-form-field">
            <mat-select formControlName="subCategoryId" placeholder="Choose subcategory">
                <mat-option value="1">opt 1</mat-option>
                <mat-option value="2">opt 2</mat-option>
                <mat-option value="3">opt 3</mat-option>
            </mat-select>
        </mat-form-field>

        <mat-form-field class="common-form-field">
            <mat-select formControlName="primaryClientId" placeholder="Choose subcategory">
                <mat-option value="1">opt 1</mat-option>
                <mat-option value="2">opt 2</mat-option>
                <mat-option value="3">opt 3</mat-option>
            </mat-select>
        </mat-form-field>

        <mat-form-field class="common-form-field">
            <mat-select formControlName="primaryConsultantId" placeholder="Choose subcategory">
                <mat-option value="1">opt 1</mat-option>
                <mat-option value="2">opt 2</mat-option>
                <mat-option value="3">opt 3</mat-option>
            </mat-select>
        </mat-form-field>
    </form>
</div>

Validation errors are showing even after I reset the form. I also tried the following methods.

this.quickFileForm.clearValidators();
this.quickFileForm.markAsPristine();
this.quickFileForm.markAsPristine();

What could be the error in my code and the possible solution? Thank you.

@RachChen Actually there is no error showing. Form values are clearing. But red color of the material input field (validation error) is not going. — shafeequemat
– shafeequemat, Commented Nov 2, 2017 at 3:39
Now formGroup.reset() is working without any bug in Angular 5. I have updated my Angular project to 5 and now it's working, no need to use localReference and resetForm() method. — shafeequemat
– shafeequemat, Commented May 16, 2018 at 3:19
resetForm() below may lead to unexpected behavior. You can define your own validations methods - see example here - stackoverflow.com/a/52676157/6332774 — Ula
– Ula, Commented Oct 6, 2018 at 6:11

AVJT82 · Accepted Answer · 2018-02-25 18:58:05Z

18

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

edited Feb 25, 2018 at 18:58

answered Nov 2, 2017 at 5:51

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

AVJT82 Over a year ago

You are very welcome :) Have a nice day and happy coding! :)

Edwin Bermejo Over a year ago

Hi, i have same problem with reset..but this does not seem to work for me :(

Edwin Bermejo Over a year ago

Sorry my bad..it works dude thanks for this! just forget to empty cache on refresh..:)

Edwin Bermejo · Accepted Answer · 2017-11-09 16:57:53Z

2

@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! :)

answered Nov 9, 2017 at 16:57

Edwin Bermejo

4423 gold badges5 silver badges18 bronze badges

Comments

gal007 · Accepted Answer · 2020-06-28 17:53:36Z

0

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

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

answered Jun 28, 2020 at 17:53

gal007

7,2409 gold badges53 silver badges74 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related