Question

我有一个带有日期选择器的动态控件。如何保存datepicker的值？

<tr *ngFor="let item of items">
    <td style="padding-right: 20px">{{item.id}}</td>
    <td style="padding-right: 20px">
        <md-input-container>
            <input mdInput [mdDatepicker]="estDate1" placeholder="Choose a date" [value]="item.estimatedDate">
            <button mdSuffix [mdDatepickerToggle]="estDate1" [value]="item.estimatedDate"></button>
        </md-input-container>
        <md-datepicker #estDate1></md-datepicker>
    </td>
</tr>

这是我的模拟组件实现：

getData() {
        this.itemsForm = this.fb.array([this.item]);

        this.items = [{ 'id': '1',  'estimatedDate': '01/01/2017'},
            { 'id': '2',  'estimatedDate': '02/01/2017'},
            { 'id': '3',  'estimatedDate': '03/01/2017'},
            { 'id': '4',  'estimatedDate': '04/01/2017'}     
        ];
    }

    saveData(){
        this.itemsForm.setValue({
            ....
        });

    }

我不确定如何从datepickers中动态收集数据并将其绑定到数组以传递给服务。

Answer 1

如果您想与item.estimatedDate进行双向绑定，则应使用[(ngModel)]。

<input mdInput placeholder="Choose a date" 
  [mdDatepicker]="estDate1"
  [(ngModel)]="item.estimatedDate">

请参阅this plunker了解演示。

Answer 2

您需要为datepicker动态设置id。您可以通过使用指令设置元素的id来完成此操作。

 <mat-form-field>
    <input matInput [matDatepicker]="i+'Datepicker'" placeholder="Date of Birth" formControlName="DOB">
    <mat-datepicker-toggle matSuffix [for]="i+'Datepicker'"></mat-datepicker-toggle>
    <mat-datepicker [id]="i+'Datepicker'"></mat-datepicker>
  </mat-form-field>
<mat-form-field>

确保获得ngFor数组的索引，如下所示：

<div *ngFor="let item of items; let i=index" [formGroupName]="i">

角度反应形式保存datepicker的值

2 个答案: