Толкать массив внутри объекта в угловом - PullRequest
0 голосов
/ 05 февраля 2019

У меня проблема с передачей массива переходов внутри itemsForm.Как сможет это сделать в Angular?Спасибо

this.itemsForm = this.fb.group({
  name: [null, Validators.required],
  description: [null, Validators.required],
});

this.selectConversionsForm = this.fb.group({
  selectConversionRows: this.fb.array([])
});

const conversions = [];

(this.selectConversionsForm.get('selectConversionRows') as FormArray).getRawValue().forEach(item => {
  conversions.push({
    conversion_id: item['conversion_id'],
  });
});

const yeah = this.itemsForm.push(conversions);
console.log(yeah);


 EXPECTED RESULT: 
   name: 'sample name', 
   description: 'sample desc', 
   conversions: [{conversion_id: 1}, {conversion_id: 2}, {conversion_id: 3}]

1 Ответ

0 голосов
/ 05 февраля 2019

Вы делаете это неправильно.Либо вам придется создать беседу FormArray со своим родителем FormGroup, а затем нажать FormGroup s.Или вам нужно добавить элемент управления conversations, используя метод addControl для FormGroup.

. Я бы рекомендовал использовать первый подход.Вот как вы можете сделать это следующим образом:

import { Component } from '@angular/core';
import { FormBuilder, FormArray, Validators, FormGroup } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  itemsForm: FormGroup;
  selectConversionsForm: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.itemsForm = this.fb.group({
      name: [null, Validators.required],
      description: [null, Validators.required],
      conversions: this.fb.array([])
    });

    // Seed selectConversionRows form group with the seed data
    // Generally this would come from the user selection. I'm assuming that you're already getting that.
    const conversions = [
      { conversion_id: 1 }, 
      { conversion_id: 2 }, 
      { conversion_id: 3 }
    ];

    // Seeding the Conversions   
    this.selectConversionsForm = this.fb.group({
      selectConversionRows: this.fb.array(conversions.map(conv => this.generateConversionFormArray(conv.conversion_id)))
    });

    const selectedConversions = this.selectConversionRows.value;
    selectedConversions.forEach(conversion => this.conversionsArray.push(this.generateConversionFormArray(conversion.conversion_id)));

    // EXPECTED RESULT: 
    //   name: 'sample name', 
    //   description: 'sample desc', 
    //   conversions: [{conversion_id: 1}, {conversion_id: 2}, {conversion_id: 3}]
    console.log(this.itemsForm.value);
  }

  generateConversionFormArray(id) {
    return this.fb.group({
      conversion_id: this.fb.control(id)
    });
  }

  get conversionsArray() {
    return (<FormArray>this.itemsForm.get('conversions'));
  }

  get selectConversionRows() {
    return (<FormArray>this.selectConversionsForm.get('selectConversionRows'));
  }

}

Вот вам Рабочий образец StackBlitz для вашей ссылки.


ОБНОВЛЕНИЕ:

Вот как вы это сделаете в своем коде:

import { Component } from '@angular/core';
import { FormBuilder, FormArray, Validators, FormGroup } from '@angular/forms';

@Component({...})
export class AppComponent {

  itemsForm: FormGroup;
  selectConversionsForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.itemsForm = this.fb.group({
      name: [null, Validators.required],
      description: [null, Validators.required]
    });

    this.selectConversionsForm = this.fb.group({
      selectConversionRows: this.fb.array([])
    });
  }

  ngOnInit() {
    this.onCreateItem();
  }

  onCreateItem() {
    const conversions = [];

    (this.selectConversionsForm.get('selectConversionRows') as FormArray).getRawValue().forEach(item => {
      conversions.push({
        conversion_id: item['conversion_id'],
      });
    });

    this.itemsForm.addControl('conversions', this.fb.array(conversions.map(conv => this.fb.group({
      conversion_id: this.fb.control(conv.conversion_id)
    }))));
    console.log(this.itemsForm.value);
  }

}

PS: Читайте комментарии в кодечтобы понять больше.

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