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

分享于2022年07月17日 angular angular-reactive-forms formarray formgroups 问答
【问题标题】: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() 更新它