“字符串”类型的参数不能分配给“AbstractControl”类型的参数。角反应形式答案

【问题标题】：Argument of type 'string' is not assignable to parameter of type 'AbstractControl'. Angular Reactive Forms“字符串”类型的参数不能分配给“AbstractControl”类型的参数。角反应形式
【发布时间】：2018-07-31 11:32:52
【问题描述】：

我正在尝试使用材料形式将字符串值推送到 formArray 中，但是它返回此错误：

Argument of type 'string' is not assignable to parameter of type 'AbstractControl'.

如果我尝试将一个完整的对象推送到数组中，它可以正常工作，但作为字符串值它不会。这是我声明 formArray 的地方：

this.maintenanceFormGroup = this._formBuilder.group({
      title: '',
      description: ['', Validators.required],
      maintenance_images_url: this._formBuilder.array([]),
  });

这是我尝试将字符串值推入数组的地方：

  const pushDownloadUrlIntoMaintenancePhotosArray = flatMap(() => {
      return this._storage.downloadURL
        .map(url => {
          console.log(url)
          const controls = <FormArray>this.formGroup.controls.maintenance_images_url;
          controls.push(url);
        });
    });

关于我为什么会收到此错误的任何建议？

【问题讨论】：

为什么要将字符串推入包含表单控件的 FormArray 中？你能解释一下 this._storage.downloadURL 后面是什么吗？
@jmachnik 图像的 URL 的字符串值存储在那里
标题为''的部分效果好吗？不应该是标题：[''] 等
controls.push(new FormControl(url))
您的变量名可能会让您感到困惑。 controls 实际上不是一个控件数组，它是您的maintenance_images_url FormArray。检查docs 显示FormArray.push() 期待一个AbstractControl，而您正在推送一个字符串。

标签： javascript angular typescript firebase angular-material

【解决方案1】：

你应该初始化你的 maintenance_images_url 格式数组，例如：

const controls = <FormArray>this.maintenanceFormGroup.controls['maintenance_images_url'];
const urlControl = this.initUrl(url);
controls.push(urlControl);

initUrl(url) {
        return this.formBuilder.group({
            value: [url],
        });
    }

更新：

const controls = this.maintenanceFormGroup.get('maintenance_images_url');
if (!controls.value.includes(url)) {
  controls.push(this.formBuilder.control(url));
}

【讨论】：

这几乎就在那里，但我希望它像这样返回：maintenace_images_url: [0] url
你正在使用 FormArray 并且应该向它推送一个表单组。