javascript - Angular的FormArray什么时候是传统数组，什么时候是FormArray对象？

我已经使用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

您可以通过在formGroup中的StackBlitz中实现组件来复制此代码，如下所示(也在我的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 Array？

最佳答案

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

但是，如果您使用FormControl方法将ControlValueAccessor实例应用于类，则会将FormControl或FormGroup(如果要使用Angular表单对象提供的话)写入已传递的控件值。

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

如果您想针对自己的情况提供更多扩展答案，则需要代码示例，因为您的实现有时可能会导致将数组转换为FormArray。

更新＃1

如果将valueChanges从users更改为form，我们可以看到这种形式已经损坏，因为.value为我们提供了另一个FormArray，而不仅仅是Array。



另外，我已经检查了实现，没有地方可以在那里找到常规数组。但是，自定义控件是错误的IMHO，因为您应该使用.value上的值而不是FormArray或与此类似的值。

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

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

关于javascript - Angular的FormArray什么时候是传统数组，什么时候是FormArray对象？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56534697/