Вложенные FormArrays для динамических форм
В моем приложении я звоню и получаю массив, который выглядит следующим образом:
[
{
project: 'One',
id: 'a123',
people: [
{
name: 'John'
id: 'axyz'
},
{
name: 'Jane'
id: 'bxyz'
}
]
},
{
project: 'Two',
id: 'b123',
people: [
{
name: 'Smith'
id: 'cxyz'
},
{
name: 'Jones'
id: 'dxyz'
}
]
}
]
Мне нужно создать форму, которая отображает все проекты и людей в виде вложенных флажков. Так это будет выглядеть так:
-One
-John
-Jane
-Two
-Smith
-Jones
Похоже, мне нужно будет объединить FormArrays внутри ReactiveForms Angular 2, чтобы я мог получить выбранные идентификаторы. Но ресурсы для FormArray довольно ограничены, и я не смог приблизиться к работе. Как я могу шаблонировать все это через форму, отображая имя и отслеживая идентификаторы отмеченных полей?
Что я сейчас пытаюсь:
В моем компоненте
faParties: FormArray;
formFilter: FormGroup;
ngOnInit() {
this.formFilter = this._fb.group({
parties: this.buildFA()
});
}
buildFA(): FormArray {
this.faParties = this._fb.array([
this.buildFAParties
]);
return this.faParties
}
buildFAParties(name): FormGroup {
let tName = name;
if (tName == null || tName == 'undefined') {
tName = 'name';
}
return this._fb.group({
name: ''
});
}
buildFilter() {
for (let i = 0; i < this.parties.length; i++) {
this.faParties.push(this.buildFAParties(this.parties[0].name))
}
}
В моем шаблоне
<form [formGroup]="formFilter" class="inline-form">
<div *ngFor="let party of faParties.controls; let i=index" [formGroupName]="i">
<input class="check" formControlName="name" id="p{{ i }}" type="checkbox" checked>
<label class="check" htmlFor="p{{ i }}"><div><span class="lnr lnr-check"></span></div><span>here</span></label>
</div>
</form>
Это просто для создания FormArray, который показывает проекты, и я продолжаю получать ошибку, которая читает Cannot find control with unspecified name attribute
, Обратите внимание, что buildFilter()
это то, что я называю после получения массива, и это должно подтолкнуть данные в FormArray.
Благодарю.