Устранение неполадок вложенных массивов флажков в Angular 6 реактивной форме - PullRequest
Новая
       13

Устранение неполадок вложенных массивов флажков в Angular 6 реактивной форме

0 голосов
/ 01 января 2019

У меня есть динамическая реактивная форма со следующей структурой, которая предназначена для создания матрицы, состоящей из произвольного числа пользователей, каждое из которых имеет произвольное число пользовательских ролей: 

this.form = this.formBuilder.group({
  users: this.formBuilder.array(
    this.usersRoles.map(
      urs => this.formBuilder.group({
        userRoles: new FormArray(
          urs.map(r => new FormControl(r))
        )
      })
    )
  )
});

В приведенном выше кодеthis.usersRoles - это массив логических значений (например, 0: истина, 1: ложь, 2: ложь и т. д.), представляющих начальное состояние флажка, сохраненного как FormControl (r).

Когда эта структуразаполненная данными, форма отображается в таблице следующим образом: 

  <tr formArrayName="users" *ngFor="let user of form['controls']['users']['controls']; index as u">
    <td *ngFor="let userRole of user['controls']['userRoles']['controls']; index as i">
        <input type="checkbox" [formControlName]="i">
    </td>
  </tr>

Моя проблема заключается в привязке визуализированной формы к базовому массиву элементов управления.Как написано выше, этот html генерирует ошибку «control.registerOnChange не является функцией», которая, по-видимому, указывает на то, что шаблон не может найти элемент управления из группы форм.

Мне кажется, что я здесь упускаю что-то простое, но не могу понять, что это может быть.Например, я попытался добавить formArrayName = "userRoles" к тд, который оборачивает флажок, думая, что это потребуется, чтобы отличить флажки в одной строке пользователя от другой, но затем получил "Не удается найти элемент управления с путем:" users -> userRoles '".

Интересно, что первый пользовательский порядок отображается нормально (хотя и без флажков) перед тем, как вызвать ошибки, так что я думаю, что я кое-что с этим для forArrayName ... Любая помощь оченьоценили!

1 Ответ

0 голосов
/ 01 января 2019

Действительно, это оказалось проблемой необходимости добавления еще нескольких атрибутов в разметку, осложненных использованием таблиц, которые ограничивают возможность вложения, как это можно сделать с div.К счастью, у нас есть ng-container, чтобы помочь с этим.

Ключевым моментом здесь было убедиться, что элементы html отражают определение формы, поэтому нам нужен повторяющийся элемент (ng-container) для родительского массива - помеченныйformArrayName = "users" и другой повторяющийся элемент (td), помеченный formArrayName = "userRoles" для дочернего массива.Дочернему массиву нужна оболочка, также помеченная с помощью formGroupName, которую предоставил наш tr.Это получает динамическое имя из индекса родительского массива ngFor.

Фрагмент шаблона ниже работает отлично. 

<ng-container formArrayName="users" *ngFor="let user of form['controls']['users']['controls']; index as u">
    <tr [formGroupName]="u">
        <td formArrayName="userRoles" *ngFor="let userRole of user['controls']['userRoles']['controls']; index as i">
            <input type="checkbox" [formControlName]="i">{{i}}
        </td>
    </tr>
</ng-container>
...