如何在Angular 8中编辑动态创建的形式的数据

Question

我是 Angular 开发新手。在我的项目中，我有一个表单，可以使用 Angular 8 应用程序中的“添加和删除”按钮动态添加和删除输入框。提交表单后，我想使用相同的添加和删除按钮显示和编辑输入字段。我怎样才能实现编辑功能。

我分享了使用添加和删除按钮创建动态表单的 stackblitz url。我需要相同的表单进行编辑。谁能帮我提供解决方案？ https://stackblitz。 com/edit/angular-dynamic-form-fields-y2ijvu?file=src%2Fapp%2Fapp.component.ts

Answer 1

为了使用动态接收的值（例如从 api）填充手机，您需要向 addPhone() 添加一个参数，并在迭代接收的值时调用它。

  addPhone(phone: string): void {
    (this.userForm.get('phones') as FormArray).push(phone);
  }

receivedPhones.forEach(phone => this.addPhone(phone))

或者您可以使用 .setValue() 或 .patchValue() FormArray 如下所示：

this.userForm.get('phones').setValue(receivedPhones)

数组具有相等的成员计数）

（setValue()要求 可以共享一个表单用于编辑和查看情况，只需添加一个标志 isNew 并填充它，然后使用它。通常，编辑功能驻留在不同的路由 (.../edit) 中，这使您能够在路由的 data 定义上提供 isNew: true。