CODEWITHSUNDEEP
angulartypescript
Muhammad Bilal
Muhammad Bilal

Reputation: 3018

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

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
  }

}

Upvotes: 0

Views: 216

Answers (2)

Abru007
Abru007

Reputation: 481

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>

Upvotes: 2

Joosep Parts
Joosep Parts

Reputation: 6245

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

Upvotes: 2

Related Questions