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

Question

我有一个模态组件，它有一个表单和该表单之外的一些其他变量。该组件是这样的:

组件:

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>

我想将表单控件重置回初始值，并将表单外部的变量设置回初始值。所以基本上我希望整个组件回到初始状态。我希望组件在关闭后重置为初始状态。

Answer 1

如果您的 HTML 上有一个表单(未在提供的代码段中显示)，您可以在表单上使用重置方法:this.yourFormName.reset()

这会将表单状态重置为原始且未更改。