PrimeNG Таблица в форме - PullRequest
Новая
       7

PrimeNG Таблица в форме

0 голосов
/ 17 апреля 2020

Я пытаюсь создать редактируемую таблицу в форме. Таблица должна содержать строки таких объектов, как InputText, Calendar, Checkbox, а затем пользователь должен сохранить данные в БД при Submit.

Я могу создать простую таблицу, она отображает данные из json массива объектов как {name, startDate, isActive}) с использованием строк и let-row в шаблоне тела: 

<form [formGroup]="groupForm" (ngSubmit)="saveData()">
<div formArrayName="rows">
<div class="row-links">
<button (click)="addRow">Add</button>
</div>
<div class="row-data">
<p-table #table [value]="rows"> <!-- [value]="groupForm.controls.rows.controls" -->
<ng-template pTemplate="header">
<tr>
<th>Name</th>
<th>Start Date</th>
<th>Is Active</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-row>
<tr> <!-- tr *ngFor="let row of groupForm.controls.rows.controls; let i=index" [formGroupName]="i" -->
<td>
{{row.name}}
</td>
<td>
{{row.startDate}} <!-- tried Calendar here -->
</td>
<td>
{{row.isActive}}
</td>
</ng-template>
</p-table>
</div>
</div>
</form>

Однако, когда я пытаюсь использовать любой виджет, такой как, например, Calendar, он выдает ошибку: Не удается найти элемент управления с путем: 'строки -> 0 -> startDate увидеть пустую строку. 

<p-calendar class="calendar"
 formControlName="startDate"
[showIcon]="true"
appendTo='body'
readonlyInput="true"
[defaultDate]="myDate"
[minDate]="myDate" dateFormat="mm/dd/yy">
</p-calendar>

Я не видел, как использовать p-таблицу в форме. Может ли кто-нибудь указать мне правильное направление? Любые образцы?

Пытался поставить таблицу <p-table [value]="groupForm.controls.rows.controls"> Без ошибок - пустая строка.

Пробовал ngFor в теле шаблона:

Это не дает ошибки, но пустая строка.

Использование PrimeNG6.1.6 с Angular6

TIA, Олег.

...