将 FormArray 重置为初始状态答案

【问题标题】：Reset FormArray to initial state将 FormArray 重置为初始状态
【发布时间】：2021-01-15 09:27:31
【问题描述】：

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

我想给用户一个取消按钮，它将表单重置为其初始状态，删除所有添加的控件。

目前我正在考虑两种方法：

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

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

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

【问题讨论】：

你有什么尝试在这里发布你的代码或stackblitz示例。
澄清问题
让我为此添加一个解决方案。

标签： angular angular-reactive-forms formarray

【解决方案1】：

要清除所有表单数组值，您可以使用.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

【讨论】：

谢谢，但它没有回答我的问题:( clear 方法清除整个数组。我希望将数组重置为以前的状态。
@emmbee checkout stackblitz 我有更新现在它会重置为以前的状态，让我知道它是否适合你。
好的，但这基本上是问题中的选项2......我会接受答案，因为我认为没有更好的方法可以做到这一点。感谢您的帮助！
@emmbee 谢谢，您可以投票支持对他人有帮助的答案。