Я пытаюсь построить встроенную редактируемую таблицу, используя последний материал + CDK для angular.
Вопрос
Как сделать так, чтобы таблица матов использовала
[formGroupName], чтобы на поля формы можно было ссылаться по правильному пути формы?
Это то, что я получил до сих пор: Полный пример StackBlitz
Шаблон
<form [formGroup]="form">
<h1>Works</h1>
<div formArrayName="dates" *ngFor="let date of rows.controls; let i = index;">
<div [formGroupName]="i">
<input type="date" formControlName="from" placeholder="From date">
<input type="date" formControlName="to" placeholder="To date">
</div>
</div>
<h1>Wont work</h1>
<table mat-table [dataSource]="dataSource" formArrayName="dates">
<!-- Row definitions -->
<tr mat-header-row *matHeaderRowDef="displayColumns"></tr>
<tr mat-row *matRowDef="let row; let i = index; columns: displayColumns;" [formGroupName]="i"></tr>
<!-- Column definitions -->
<ng-container matColumnDef="from">
<th mat-header-cell *matHeaderCellDef> From </th>
<td mat-cell *matCellDef="let row">
<input type="date" formControlName="from" placeholder="From date">
</td>
</ng-container>
<ng-container matColumnDef="to">
<th mat-header-cell *matHeaderCellDef> To </th>
<td mat-cell *matCellDef="let row">
<input type="date" formControlName="to" placeholder="To date">
</td>
</ng-container>
</table>
<button type="button" (click)="addRow()">Add row</button>
</form>
компонент
export class AppComponent implements OnInit {
data: TableData[] = [ { from: new Date(), to: new Date() } ];
dataSource = new BehaviorSubject<AbstractControl[]>([]);
displayColumns = ['from', 'to'];
rows: FormArray = this.fb.array([]);
form: FormGroup = this.fb.group({ 'dates': this.rows });
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.data.forEach((d: TableData) => this.addRow(d, false));
this.updateView();
}
emptyTable() {
while (this.rows.length !== 0) {
this.rows.removeAt(0);
}
}
addRow(d?: TableData, noUpdate?: boolean) {
const row = this.fb.group({
'from' : [d && d.from ? d.from : null, []],
'to' : [d && d.to ? d.to : null, []]
});
this.rows.push(row);
if (!noUpdate) { this.updateView(); }
}
updateView() {
this.dataSource.next(this.rows.controls);
}
}
Проблема
Это не сработает. Консоль дает
Ошибка: невозможно найти элемент управления с путем: "даты → из"
Кажется, что [formGroupName]="i" не имеет никакого эффекта, потому что путь должен быть dates -> 0 -> from при использовании formArray.
Мой текущий обходной путь: для этой проблемы я обошел поиск по внутреннему пути (formControlName="from") и напрямую использую элемент управления формой: [formControl]="row.get('from')", но я хотел бы знать, как я могу это сделать (или, по крайней мере, почему я не могу) использовать Reactive Form предпочтительным способом.
Любые советы приветствуются. Спасибо.
Поскольку я считаю, что это ошибка, я зарегистрировал проблему в репозитории angular/material2 github.