Angular2如何从组件中清除表单值。

时间:2017-02-07 16:52:42

标签: angular angular2-forms

我的表格如下所示。当我再次打开我的表单时,它会保留文本框中的上一个值。如何进行清除并在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();
    }

0 个答案:

没有答案