设置初始值Angular 2反应formarray

Posted 2023-03-13

【中文标题】设置初始值Angular 2反应formarray

【英文标题】：Setting initial value Angular 2 reactive formarray

【发布时间】：2017-04-14 00:05:51

【问题描述】：

我正在尝试为 angular 2 反应形式 formArray 对象设置初始值。

虽然用于设置表单值的 json 对象包含具有多个条目的数组值，但仅显示第一个条目，“form.value”也仅显示第一个条目。

我正在使用语法(<FormGroup>this.myForm).patchValue(value, onlySelf: true ); 来设置表单的初始值。

这是一个演示问题的 plunker：https://plnkr.co/edit/j1S80CmPBF1iHI5ViEia?p=preview

我使用来自https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2 的示例来创建 plunker。

任何想法我做错了什么？

【问题讨论】：

您已经使用包含一个FormGroup 的FormArray 初始化了myForm 表单。我认为这是另一个地址被忽略的原因。

【参考方案1】：

您将addresses 设置为一组表单，而在initAddress() 方法中您只返回一个元素。 如果您向addresses 数组添加第二个调用，您将获得第二个地址。

this.myForm = this._fb.group(
  name: ['', [Validators.required, Validators.minLength(5)]],
  addresses: this._fb.array([
    this.initAddress(),
    this.initAddress()
  ])
);

这听起来有点愚蠢，但它会返回位于数组中的元素，如果超过数组中元素的数量，你将得到一个空元素。

希望对你有帮助。

【讨论】：

在我看来，更好的解决方案是遍历数组以找出您需要多少个表单组并将它们列在表单数组中，这将是您的属性值，在您的案例“地址”。此处示例：***.com/questions/42550402/…

@inadcod 在像我这样的实际场景中，需要调用后端服务，因此您事先不知道 FormArray 中元素的数量...