How can I reset Angular Reactive Form

Question

I have tried and failed to find the way in which to reset my angular form.

Can somebody help?

<form #thisIsAForm>
  <mat-form-field class="full-width">
    <input matInput placeholder="Weather">
  </mat-form-field>
</form>
<button mat-raised-button (click)="resetForm()">Reset</button>

export class Example{
  @ViewChild('thisIsAForm') thisIsAForm;

  resetForm() {
    this.thisIsAForm.reset();
  }
}

user4676340 · Accepted Answer · 2018-02-12 15:03:52Z

27

Almost ! Use a reactive form for that :

<form [formGroup]="myForm">
  <mat-form-field class="full-width">
    <input matInput placeholder="Weather" formControlName="weather">
  </mat-form-field>
</form>
<button mat-raised-button (click)="myForm.reset()">Reset</button>


export class Example{
  myForm: FormGroup;

  constructor(private fb: FormBuilder) { 
    this.myForm = fb.group({
      weather: ''
    });
  }

  // If the HTML code doesn't work, simply call this function
  reset() {
    this.myForm.reset();
  }
}

answered Feb 12, 2018 at 15:03

user4676340

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

2 Comments

physicsboy Over a year ago

This works perfectly in the stackblitz, however when I am using it within my actual code I am getting the dreaded error Can't bind to 'formGroup' since it isn't a known property of 'form'. I have checked everything and found that I have imported both FormsModule and ReactiveFormsModule properly... I don't get what is going wrong.

physicsboy Over a year ago

SCRATCH THAT! I found it was me being an idiot. I'd forgotten that the components using the clear form feature are themselves imported into app.module.ts via another import file, so I added ReactiveFormsModule as an import to the intermediary file and all is good!

axl-code · Accepted Answer · 2018-02-12 15:05:19Z

4

<form [formGroup]="thisIsAForm" (ngSubmit)="onSubmit()">
  <mat-form-field class="full-width">
    <input formControlName="weather" placeholder="Weather">
  </mat-form-field>
</form>
<button mat-raised-button (click)="resetForm()">Reset</button>


export class Example{
  thisIsAForm: FormGroup;

  constructor() {
    this.thisIsAForm = new FormGroup(
      weather: new FormControl('')
    ); 
  }

  resetForm() {
    this.thisIsAForm.reset();
  }
}

answered Feb 12, 2018 at 15:05

axl-code

2,3241 gold badge17 silver badges25 bronze badges

1 Comment

axl-code Over a year ago

Arg @trichetriche was faster :P

Chuk Lee · Accepted Answer · 2019-10-07 02:38:01Z

1

In Angular 8, if you do

<form #form="ngForm" (ngSubmit)="process(form)">

process(form: NgForm) { ...

You'll get the following error when you build with --prod

Argument of type 'FormGroupDirective' is not assignable to parameter of type 'NgForm'.

on (ngSubmit)

What I did was to inject form template reference as FormGroupDirective then call resetForm().

<form #form (ngSubmit)="process(form)">

@ViewChild('form', { static: false }) FormGroupDirective formDirective;

See FormGroupDirective

answered Oct 7, 2019 at 2:38

Chuk Lee

3,60824 silver badges19 bronze badges

Comments

Mahesh B · Accepted Answer · 2019-12-09 08:05:02Z

1

I think you need to add ngForm directive in the html code as mentioned below stackbliz example also add name and ngModel ngControl to form elements.

Stackbliz: Template Driven Form Reset

answered Dec 9, 2019 at 8:05

Mahesh B

1432 silver badges16 bronze badges

Comments

Munish Kumar Sharma · Accepted Answer · 2020-09-07 23:18:49Z

1

For me adding type="reset" to the reset button resolved issue

<button **type = "reset"** mat-raised-button (click)="resetForm()">Reset</button>

answered Sep 7, 2020 at 23:18

Munish Kumar Sharma

211 bronze badge

Comments

tryingToLearn · Accepted Answer · 2019-07-19 07:28:24Z

Here I m resetting the template-driven form without making form dirty.

    <form class="example-form" #charreplaceform="ngForm">
          <mat-form-field class="example-full-width">
            <input matInput #codepointSel="ngModel" (change)="createReplacementChar()" (keyup)="checkForNumber()"
              required [(ngModel)]="charReplaceInfo.codePoint" name="code-point" placeholder="Code Point (Only number)"
              [disabled]="isDisabled">
          </mat-form-field>

          <a (click)="refreshCharRecord(charreplaceform)">
            <i class="material-icons">
              loop
            </i>
          </a>
    </form>

    // in .ts
    refreshCharRecord(form: NgForm) { // getting the form reference from template 
    form.form.reset();   // here we are resetting the form without making form dirty
  }

Collectives™ on Stack Overflow

How can I reset Angular Reactive Form

6 Answers 6

2 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related