Angular 6 FormArray отправить как массив - PullRequest
0 голосов
/ 30 августа 2018

У меня есть Реактивные формы на моем сайте, который использует FormBuilder.

У меня есть два поля, которые имеют FormControl s и массив полей, созданных пользователем, который является 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)
    );
  }

Ответы [ 3 ]

0 голосов
/ 30 августа 2018

FormArray объединяет значения каждого дочернего FormControl в массив

Вы должны помещать FormControls согласно вводу iuser в FormArray. Если вы уже делаете это, пожалуйста, поделитесь этой частью кода

0 голосов
/ 31 августа 2018

Решение

formData.append('features', this.features.value); изменено на

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

Таким образом, мы перебираем rawValue с, которые являются массивом.

0 голосов
/ 30 августа 2018

Это не проблема FormArray. FormData отображает массив в строку. Попробуйте использовать это решение.

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

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

 }

Используйте FormData, когда вам нужно отправить файл с <input type="file" />

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...