将 FormArray 重置为初始状态

Question

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

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

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

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

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

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

Answer 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

将 FormArray 重置为初始状态

Reset FormArray to initial state

angular

angular-reactive-forms

formarray