angular reset reactive form

Question

I'm trying to reset my form after it is sent, but only the value is set to null.

component.html

  <div *ngIf="!loading" fxLayout="row" class="note-textarea">
    <form  fxFlex fxLayout="column" fxLayoutGap="10px" [formGroup]="noteForm">
      <mat-form-field fxFlex>
        <textarea matInput #note rows="1" maxlength="100" placeholder="Note" formControlName="description"></textarea>
        <mat-hint align="end">{{note.value?.length || 0}}/100</mat-hint>
        <mat-error *ngIf="noteForm.get('description').errors && noteForm.get('description').touched">description is required</mat-error>
      </mat-form-field>
      <div fxFlex>
        <button mat-stroked-button class="save-btn" (click)="insertNote()">Save</button>
      </div>
    </form>
  </div>

component.ts

  noteForm: FormGroup = this.formBuilder.group({
    description: new FormControl(null, Validators.required)
  })

 insertNote() {
   // bunch of code 

      this.noteForm.reset();

    }
  }

the problem is that input field is mark as dirty as you can see below:

Seems like a duplicate of the question: https://stackoverflow.com/questions/34608361/how-to-reset-form-validation-on-submission-of-the-form-in-angular-2 — Just Shadow, Feb 04 '20 at 09:54
@Ivilin Stouanov, Read about using `resetForm` or `type=reset`. — Mridul, Feb 04 '20 at 10:10
reset will resets the FormGroup by marks all descendants are marked pristine and untouched, and the value of all descendants to null. — Muhammed Albarmavi, Feb 04 '20 at 12:13

score 7 · Accepted Answer · answered Feb 04 '20 at 09:52

7

Try with button type="reset" option

<button type="reset">Reset</button>

Stackblitz Example

answered Feb 04 '20 at 09:52

Akhil Naidu

789
1
4
16

this wil reset the from but he try reset after click save and run insertNote method from the component body – Muhammed Albarmavi Feb 04 '20 at 12:15

score 2 · Answer 2 · answered Feb 04 '20 at 09:49

You can use ngForm to do so

In your Html file

<form  fxFlex fxLayout="column" fxLayoutGap="10px" [formGroup]="noteForm" #noteForm="ngForm">

In your ts file

 @ViewChild('noteForm', { static: true }) noteForm: NgForm;
//to reset form
this.noteForm.resetForm();

Replace name accordingly in your HTML and TS files.

Muhammed Albarmavi · Answer 3 · 2020-02-04T12:20:50.990

you can use formGroup reset method like this (click)="noteForm.reset()" and this method will marks all descendants are marked pristine and untouched, and the value of all descendants to null.

example

<div [formGroup]="form">
    <input placeholder="description..." type="text" formControlName="description" ><br/><br/>

    <div
        *ngIf="form.get('description').hasError('required') && (form.get('description').dirty || form.get('description').touched) ">

        description is required

    </div>
    <button type="button" (click)="insertNote()">Add </button> &nbsp;
    <button type="button" (click)="form.reset()">reset </button>

</div>

demo

with angular material you don't need to check if the controls is touched

   <mat-error *ngIf="noteForm.get('description').hasError('required')">
       description is required
   </mat-error>

demo

I don't use this <button type="reset">Reset</button> because most the time I want to reset the form from the component and sometimes I want to pass initial value after reset

score -1 · Answer 4 · answered Apr 13 '21 at 01:14

-1

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

answered Apr 13 '21 at 01:14

Khalil Daoud

1

angular reset reactive form

4 Answers4