Angular Reactive Forms - 提交后在 FormArray 中只保留一个元素 - 技术 - 文库

【问题标题】：Angular Reactive Forms - 提交后在 FormArray 中只保留一个元素(Angular Reactive Forms - keep only one element in FormArray after submit)
【发布时间】：2022-01-25 16:09:13
【问题描述】：

我有一个包含 FormArray 的 FormGroup。当用户完成表单时，他/她可以动态添加新控件。为此，我使用 FormArray。但是在提交表单后，用户添加的所有控件都保留在页面上。所以我想在点击提交按钮后在FormArray中只保留一个控件。

代码如下：

  workoutForm = this.fb.group({
    name: ['', Validators.required],
    completed: [false],
    exercises: this.fb.array([this.createExercise()])
  })

  createExercise(): FormGroup {
    return this.fb.group({
      name: ['', Validators.required],
      completed: [false]
    })
  }

  onSubmit() {
   // Here I want to delete all elements from the exercises and to keep only one
    this.workoutForm.reset();
  }

UI （不要评判它。还没有 CSS :)）

Angular Reactive Forms - keep only one element in FormArray after submit

您现在可以看到有 2 个练习字段。单击提交后，我希望它仅为 1。我该怎么做？

【解决方案1】：

其实我就是这样解决的：

我为我的练习添加了一个 getter（我稍后会在我的代码中使用它）。

get exercises() {
  return this.workoutForm.get('exercises') as FormArray;
}

然后我清除了所有练习 - 这将删除 FormArray 中的所有元素。

this.exercises.clear();

然后我又添加了一个字段

  addExercise() {
    this.exercises.push(this.createExercise());
  }

onSubmit() {
  ///...some code
  this.addExercise();
}

所以整体代码如下所示：

workoutForm = this.fb.group({
    name: ['', Validators.required],
    completed: [false],
    exercises: this.fb.array([this.createExercise()])
  })

  get exercises() {
    return this.workoutForm.get('exercises') as FormArray;
  }

  createExercise(): FormGroup {
    return this.fb.group({
      name: ['', Validators.required],
      completed: [false]
    })
  }

  addExercise() {
    this.exercises.push(this.createExercise());
  }

  onSubmit() {
    this.workoutForm.reset();
    this.exercises.clear();
    this.addExercise();
  }

甚至你可以创建自己的数组 this.excersisesArray.push({ name: ['', Validators.required], completed: [false] }) ，然后用 shift() 更新它

Angular Reactive Forms - 提交后在 FormArray 中只保留一个元素

分享于2022年07月17日 angular angular-reactive-forms formarray formgroups 问答