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: stackoverflow.com/questions/34608361/… — Just Shadow
– Just Shadow, Commented Feb 4, 2020 at 9:54
@Ivilin Stouanov, Read about using resetForm or type=reset. — Mridul
– Mridul, Commented Feb 4, 2020 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
– Muhammed Albarmavi, Commented Feb 4, 2020 at 12:13

Akhil Naidu · Accepted Answer · 2020-02-04 09:52:24Z

8

Try with button type="reset" option

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

Stackblitz Example

answered Feb 4, 2020 at 9:52

Akhil Naidu

8671 gold badge5 silver badges18 bronze badges

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

1 Comment

Muhammed Albarmavi Over a year ago

this wil reset the from but he try reset after click save and run insertNote method from the component body

Mridul · Accepted Answer · 2020-02-04 09:49:27Z

2

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.

answered Feb 4, 2020 at 9:49

Mridul

1,3661 gold badge8 silver badges19 bronze badges

Comments

Muhammed Albarmavi · Accepted Answer · 2020-02-04 12:20:50Z

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

Khalil Daoud · Accepted Answer · 2021-04-13 01:14:22Z

-1

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

answered Apr 13, 2021 at 1:14

Khalil Daoud

1

Collectives™ on Stack Overflow

angular reset reactive form

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related