Question

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

我有两个具有FormControl的字段和一个由用户创建的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)
    );
  }

Answer 1

解决方案

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

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

因此，我们迭代了rawValue个数组。

Answer 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

Answer 3

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

您必须按照iuser输入将FormControls推入FormArray。如果您已经这样做了，请共享该代码部分

Angular 6 FormArray作为数组发送

3 个答案:

解决方案