Массив formGroup в mat-таблице для каждой строки - PullRequest
Новая
       34

Массив formGroup в mat-таблице для каждой строки

0 голосов
/ 12 июня 2019

У меня есть массив formGroup, где каждый элемент представляет форму. Затем у меня есть таблица mat, где я хочу создать каждый tr (то есть каждую строку) в виде отдельной формы, чтобы i-я строка таблицы была связана с i-й формой группы. Таким образом, внутри i-й строки каждый элемент td содержит вход, и этот вход должен быть связан с formControl, который находится внутри i-й formGroup.

Таким образом, каждая строка представляет собой форму, которую можно отправить отдельно (в каждой строке также есть кнопка «Отправить»).

Как мне это сделать? Можете ли вы дать мне плиту, над которой я могу работать?

Редактировать: вот что я пробовал до сих пор: https://angular -dpwgzp.stackblitz.io где я получаю «Ошибка: formControlName должен использоваться с родительской директивой formGroup.» Кроме того, я понятия не имею, куда поместить тег в каждой строке.

1 Ответ

1 голос
/ 13 июня 2019

Трудно помочь, если мы не можем получить доступ к коду.

В это стекаблиц Я поставил простой пример.Обратите внимание, что мы создаем массив формы, например 

myformArray = new FormArray([
    new FormGroup({
      name: new FormControl("uno"),
      surname: new FormControl("one")
    }),
    new FormGroup({
      name: new FormControl("dos"),
      surname: new FormControl("two")
    }),
    new FormGroup({
      name: new FormControl("tres"),
      surname: new FormControl("three")

    })])

. Источником данных таблицы являются элементы управления formArray. 

  dataSource = this.myformArray.controls;

Таким образом, «element» - это FormGroup, поэтому ячейкаможет быть как 

  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element">
       <input [formControl]="element.get('name')">
       </td>
  </ng-container>

Смотрите, что мы используем [formControl].Это.Матричная таблица перебирает myformArray.controls, который является только массивом FormGroups.FormGroup - это этот «элемент», поэтому element.get ('...') - это FormControl.По этой причине мы можем использовать [formControl] = element.get ('...')

как будто мы пишем не mat-table 

<div *ngFor="let element of myformArray.controls">
  <input [formControl]="element.get('name')">
  <input [formControl]="element.get('surname')">
</div>
...