組件模板
<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>
組件類
export class TemplateComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
model: any = {
name: "",
};
contactUsTemplateSubmit() {
console.log(this.model); //form Values
}
clearAll() {
this.model.reset(); // not working
}
}
uj5u.com熱心網友回復：
好的，這是清除表單的解決方案
在.ts
clearAll(InputFormValue: ngForm) {
InputFormValue.form.reset();//this will work
}
在 .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>
uj5u.com熱心網友回復：
對于編程方法，您可以獲取表單ngAfterViewInit()并在其上呼叫重置。https://stackoverflow.com/a/52167560/15439733
或者在模板上這也可以。
<a class="btn btn-secondary" (click)="formGroupContactUs_Template.reset()">Clear All</a>
作業示例：https ://stackblitz.com/edit/angular-workbench-template-driven-form-b??tfxnf?file=src/app/app.component.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/479154.html
下一篇：張量流的負巨大損失