将FormArray重置为初始状态

问题描述

我有一个FormArray，里面有一些初始控件。用户可以通过单击触发push()方法的按钮来添加控件。

我想为用户提供一个取消按钮，该按钮会将表单重置为初始状态，并删除所有添加的控件。

到目前为止，我正在考虑两种方法：

选项1 ： 跟踪添加控件的索引并使用removeAt()方法

选项2 ：或者，我可以使用其初始配置重建整个FormArray。

但是有没有一种简单的方法可以将FormArray重置为特定状态，例如当我们使用setValue()重置值时，还是必须使用上述选项手动重建它？

解决方法

要清除所有表单数组值，可以使用.clear()

以下是完整的代码，其中列出了所有可能的方法（add，remove，reset）

form: FormGroup;

constructor(private fb: FormBuilder) {}

get skills() {
  return this.form.get('skills') as FormArray;
}

newSkill(): FormGroup {
  return this.fb.group({
   skill: '',exp: '',})
}

addSkill() {
  this.skills.push(this.newSkill());
}

removeSkill(index) {
  this.skills.removeAt(index);
}

resetSkill() {
 this.skills.clear();
}

ngOnInit() {
  this.form = this.fb.group({
   name: [''],email: [''],skills: this.fb.array([])
 });
}

模板

<form [formGroup]="form">
  Name <input type="text" formControlName="name"> <br>
  Email <input type="text" formControlName="email"> <br>
  <div formArrayName="skills">
   <div *ngFor="let skill of skills.controls; let i=index">
     <div [formGroupName]="i">
       skill name :
       <input type="text" formControlName="skill">
       exp:
       <input type="text" formControlName="exp">

       <button (click)="removeSkill(i)">Remove</button>
     </div>
   </div>
  </div>
  <button type="button" (click)="addSkill()">Add Skill</button>

  <br><br>
  <button type="button" (click)="resetSkill()">Reset Skills</button>
</form>

工作DEMO