Angular中的FormArray何时是传统数组，何时是FormArray对象？

Question

Angular中的FormArray何时是传统数组，何时是FormArray对象？

javascriptangularformsformarray

10

我使用ControlValueAccessor构建了一个自定义输入组件，可以很好地添加标签作为选择项。（Stackblitz）

我的问题是：

当我在表单中实现该组件（城市和州控件）时
通过选择某些选项向两个控件添加值
提交表单
有时控件值是所选标签的数组（如预期的那样）
其他时候它是一个实际的FormArray对象

这是相同组件的两个值在提交angular表单后的截图。一个是对象数组（预期的），另一个是实际的FormArray对象，其中.value属性包含对象数组！

如果您不想访问StackBlitz，则可以查看以下一些代码。

自定义控件的实现方式如下。

this.form = this.fb.group({
  tags: this.fb.array([])
});

当用户选择下拉菜单项或按下回车键时，对象会被保存如下：

get tagsArray(): FormArray { return this.form.get('tags') as FormArray; }
...
this.tagsArray.push(new FormControl(value));
this.onChange(this.tagsArray); // update controller value

你可以通过在一个类似于我的 StackBlitz 中的 formGroup 中实现该组件来复制它（也可以在我的 StackBlitz 中进行操作）。

表单初始化。

public form: FormGroup = this.fb.group({
    states: [],
    cities: []
});

模板

<input-tags formControlName="cities" label="Cities" [typeAhead]="cities" [displayKeys]="['name']" filterKeys="['name']"></input-tags>
<input-tags formControlName="states" label="States" [typeAhead]="states" [displayKeys]="['name']" filterKeys="['name']"></input-tags>

但问题是：

何时 Angular 的 FormArray 是传统数组，何时它是类似于 FormArray 的数组对象？

- Ben Racicot

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sergey · Accepted Answer

当您使用new FormArray([])或formBuilder.array([])创建控件实例时，会创建FormArray对象。

但是，如果您将一个FormControl实例应用于带有ControlValueAccessor方法的类，则它将把FormControl或FormGroup（如果您想要使用Angular提供的表单对象）写入您传递的控制的值中。

因此，在第一种情况下，您将获得一个FormArray对象，在第二种情况下，您可以获得常规JS类型（对象、数组、字符串等）或FormGroup/FormControl。

如果您想要更详细的答案来特定于您的情况，则需要代码示例，因为您的实现可能在某个时刻将数组转换为FormArray。

更新#1

如果我们将valueChanges从users更改为form，我们会发现这个表单有点错误，因为.value给我们的是另一个FormArray而不仅仅是数组。

另外，我已经检查了实现，在那里您无法获取常规数组。但是，自定义控件的实现方式在我看来是错误的，因为您应该在.value上获得值，而不是FormArray或类似于此的东西。

因此，如果您可以更改此控件的实现方式，我建议您这样做。我以以下方式实现：

registerOnChange(fn: any): void {
  this.tagsArray.valueChanges.subscribe(fn);
}