Angular 6 FormArray 作为数组发送答案

【问题标题】：Angular 6 FormArray send as arrayAngular 6 FormArray 作为数组发送
【发布时间】：2018-08-30 10:41:08
【问题描述】：

我的网站上有使用 FormBuilder 的响应式表单。

我有两个具有FormControls 的字段和一个由用户创建的字段数组FormArray。

当我向服务器发送数据时，发现FormArray 发送的不是数组，而是一个字符串，其中列出的项目带有逗号。

如何使用数组向服务器发送数据？

这是我的类方法

formGroup = this.fb.group({
    link: [null, [
      Validators.required,
      Validators.pattern(/^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/)
    ]],
    image: [null, Validators.required],
    features: this.fb.array([this.fb.control('', Validators.required)])
  });

beforeSubmit(): FormData {
    const formData = new FormData();

    formData.append('link', this.link.value);
    formData.append('image', this.image.value);
    formData.append('features', this.features.value);

    return formData;
  }

  submit() {
    console.log('submit');

    const formData = this.beforeSubmit() as FormData;

    this.ss.postSite(formData).subscribe(
      response => {
        console.log(response);
      }
    );

  }

和服务

postSite(input: FormData) {
    console.log('posting');

    return this.http.post<Site>(this.API_URL, input, this.HEADERS).pipe(
      catchError(this.handleError)
    );
  }

【问题讨论】：

请提供用户添加字段到数组的功能
它只是将空的 FormControl 推送到 features 数组

标签： javascript angular forms api typescript

【解决方案1】：

解决方案

formData.append('features', this.features.value);改为

this.features.getRawValue().forEach(e => {
  formData.append('features[]', e);
});

因此我们迭代rawValues 这是一个数组。

【讨论】：

【解决方案2】：

这不是 FormArray 的问题。 FormData 将数组映射到字符串。尝试使用此解决方案。

submit() {
   console.log('submit');
   const formData = this.formGroup.value;

   this.ss.postSite(formData).subscribe(
     response => {
       console.log(response);
     }
   );

 }

当你需要用<input type="file" />发送文件时使用FormData

【讨论】：

【解决方案3】：

FormArray 将每个子 FormControl 的值聚合到一个数组

您必须根据 iuser 输入将 FormControls 推送到 FormArray。如果您已经这样做了，请分享该代码部分

【讨论】：