将FormArray重置为初始状态

时间:2020-09-29 18:04:29

标签: angular angular-reactive-forms formarray

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

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

到目前为止,我正在考虑两种方法:

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

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

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

1 个答案:

答案 0 :(得分:1)

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

以下是完整的代码,其中列出了所有可能的方法(addremovereset

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