Angular's template-driven form reset is not working using component class

Question

Component Template

<form #formGroupContactUs_Template = "ngForm" (ngSubmit)="contactUsTemplateSubmit()">        
       <input type="text" class="form-control" name="name" [(ngModel)]="model.name">
       <!-- {{name!.value}} -->
       <button class="btn btn-primary mr-2" type="submit" 
       [disabled]="this.formGroupContactUs_Template.status != 'VALID'">Submit</button>
       <a class="btn btn-secondary" (click)="clearAll()">Clear All</a>
    </form>

Component Class

export class TemplateComponent implements OnInit {
 
  constructor() { }

  ngOnInit(): void {
  }

  model: any = {
    name: "",
  };

  contactUsTemplateSubmit() {
    console.log(this.model); //form Values
  }

  clearAll() {
    this.model.reset(); // not working
  }

}

stackblitz.com/edit/…, stackblitz.com/edit/…

Muhammad Bilal
– Muhammad Bilal

2022-05-25 04:22:49 +00:00
Commented May 25, 2022 at 4:22 — Muhammad Bilal
– Muhammad Bilal, Commented May 25, 2022 at 4:22

Abru007 · Accepted Answer · 2022-05-20 08:12:42Z

2

OK, here is solution for clearing the form

in .ts

 clearAll(InputFormValue: ngForm) {
   InputFormValue.form.reset();//this will work
  }

in .html

<form #formGroupContactUs_Template="ngForm" (ngSubmit)="contactUsTemplateSubmit(formGroupContactUs_Template)">        
       <input type="text" class="form-control" name="name" [(ngModel)]="model.name">
       <!-- {{name!.value}} -->
       <button class="btn btn-primary mr-2" type="submit" 
       [disabled]="this.formGroupContactUs_Template.status != 'VALID'">Submit</button>
       <a class="btn btn-secondary" (click)="clearAll(formGroupContactUs_Template)">Clear All</a>
    </form>

edited May 20, 2022 at 8:12

answered May 20, 2022 at 5:47

Abru007

4816 silver badges13 bronze badges

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

3 Comments

Muhammad Bilal Over a year ago

<a class="btn btn-secondary" (click)="clearAll()">Clear All</a> clearAll() have an error in templae: Expected 1 arguments, but got 0.ngtsc(2554)

Abru007 Over a year ago

i update the code, need to pass the parms to .ts

Muhammad Bilal Over a year ago

working now with changes

Joosep Parts · Accepted Answer · 2022-05-20 05:45:47Z

2

For programmatic approach you could get the form in ngAfterViewInit() and call reset on it. https://stackoverflow.com/a/52167560/15439733

Or on template this would work too.

   <a class="btn btn-secondary" (click)="formGroupContactUs_Template.reset()">Clear All</a>

Working example: https://stackblitz.com/edit/angular-workbench-template-driven-form-btfxnf?file=src%2Fapp%2Fapp.component.html

answered May 20, 2022 at 5:45

Joosep Parts

6,3452 gold badges13 silver badges38 bronze badges

Collectives™ on Stack Overflow

Angular's template-driven form reset is not working using component class

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related