在 Angular 12 反应形式中使用 patchValue 绑定形式数组的最佳方式

Question

我正在获取不同格式的数据，但在使用 'split' 之后，我终于得到了正确的响应值。现在控制台显示响应数据如下：

0:{ name: 'dev', label: 'actor' },
1:{ name: 'madhu', label: 'actress' },
 ......

现在我想在我的 formArray 中修补这些数据

为了更好地理解，我创建了一个演示..

DEMO

Answer 1

使用 patchvalue() 中定义的 documentation

// Get the data from the service or a placeholder defined here
const dataFromService: Array<{name: string; label: string}> = [
  { name: 'dev', label: 'actor' },
  { name: 'madhu', label: 'actress' }
];
// patch the form array with your data
// as long as your data conforms to the names of the FormControls in your formArray, patchValue works
form.patchValue(dataFromService);

Answer 2

您需要将 formGroup 推入 formArray，如下所示。任何时候你想添加数据，你可以推入数组（你可以使用你做的扩展来获取表单控件'credentials'）

 ngOnInit(): void {
    this.form = this.fb.group({
      credentials: this.fb.array(this.getData()),
    });
  }

  getData(): FormGroup[] {
    return this.data.map(d => this.fb.group({
      name: d.name,
      label: d.label,
    }))
  }

在 Angular 12 反应形式中使用 patchValue 绑定形式数组的最佳方式

Best way to bind form array using patchValue in Angular 12 reactive form

javascript

angular

formarray