我的表格如下所示。当我再次打开我的表单时,它会保留文本框中的上一个值。如何进行清除并在Add New的情况下开始新鲜并在编辑时填充传递给对象的当前信息。
<form class="form-inline" #employerForm="ngForm">
<div class="form-group">
<label class="sr-only" for="employerName">Employer</label>
<input type="text" class="form-control" id="employerName" placeholder="Employer Name ..." name="empName" [(ngModel)]="employer.name"
required>
</div>
<!--<button type="submit" class="btn btn-primary" [disabled]="!employerForm.valid">Create new Employer</button>-->
<button *ngIf="mode=='edit'" (click)="saveEmployer('edit')" type="submit" class="btn btn-primary" >Save Changes</button>
<button *ngIf="mode=='add'" (click)="saveEmployer('add')" type="submit" class="btn btn-primary" >Save Changes</button>
<button type="submit" (click)="close()" class="btn btn-primary" [disabled]="!employerForm.valid">Cancel Changes & close</button>
</form>
组件中的代码如下
public employer: Employer = new Employer();
close() {
// this.employer = null;
this.mode = null
setTimeout(() => { this.employer = null }, 500);
this.modal.close();
}
private saveEmployer(mode: string)
{
this.mode = mode;
if (this.mode == "add") {
//Validate the Fields
// let obj = JSON.parse(JSON.stringify(this.employer));
this.employers.push(this.employer);
// this.employer = null;
this.close();
}
else if (this.mode = "edit"){
//Find the Current Employer and update it.
// this.employer = null;
this.close();
}
}
private editEmployer(_employer: Employer, mode: string) {
debugger;
this.mode = mode;
if (this.mode == "edit") {
this.modeMessage = "Edit Employer";
this.employer = _employer;
this.modal.open();
}
else if (this.mode == "add")
{
//employerForm.employer.name = "";
this.modeMessage = "Add New Employer";
this.employer = new Employer();
this.modal.open();
}