如何在Angular 2中将组件设置回初始状态

问题描述：

我有一个组件，它是一种具有窗体和其他一些变量的窗体。该组件是这样的：如何在Angular 2中将组件设置回初始状态

组件：

export class PersonComponent implements OnInit { 

countPerson: number=0; 
persons: Person [] = []; 

personForm : FormGroup; 

ngOnInit(){ 
    this.step1Form= this.fb.group({ 
    firstName: 'Levi', 
    lastName: 'Ackerman' 
    }); 
} 

submitPerson(person: Person){ 
    this.persons.push(person); 
    this.incrementPerson(); 
} 

incrementPerson(){ 
    this.count++; 
} 

}

在模板：

<div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-body> 
     <label>First Name</label> 
     <input type="text" formControlName="firstName"> 
     <label>LastName Name</label> 
     <input type="text" formControlName="lastName"> 
     <button type="button" (click)="submitPerson()">Submit</button> 
     </div> 
    <div class="modal-footer"> 
     <button type="button" data-dismiss="modal">Close</button> 
    </div> 
    </div> 
</div>

我想重置表单控件返回到初始值和以及设定外的变量的形式回到初始值。所以基本上我希望整个组件回到初始状态。我希望组件在关闭后重置为初始状态。

从哪里启动你的模态？ – Aravind

模态由父组件触发。所以模态是一个子组件 – ilovejavaAJ

你是否想要在模态窗口中编辑人员数据？ – Aravind

答

如果你的HTML表单（未在所提供的片段所示），您可以在表单上使用复位方法：this.yourFormName.reset()

这将重置表格状态恢复到原始的和不变的。

将重置重置整个组件或只是形式？我的组件由一个表单和变量组成。我希望表单以及组件的变量回到初始值。 – ilovejavaAJ

这将重置表单。你需要自己更新自己的变量。 – DeborahK

在我的代码示例中，我有一个保存操作后执行的'onSaveComplete（）'。它调用重置方法，然后导航回到总览/列表页面。您可以轻松地将其更改为重新初始化所有组件变量。你可以在这里看到我的代码示例：https://github.com/DeborahK/Angular2-ReactiveForms/tree/master/APM-Updated – DeborahK

如何在Angular 2中将组件设置回初始状态

相关推荐