Вложенные 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.

Благодарю.

0 ответов

Другие вопросы по тегам