Вы делаете это неправильно.Либо вам придется создать беседу 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: Читайте комментарии в кодечтобы понять больше.