angular - 角度反应形式保存日期选择器的值

Question

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

<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({
            ....
        });

    }

我不确定如何从日期选择器动态收集数据并将其绑定到数组以传递给服务。

Answer 1

您需要使日期选择器的 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">

Answer 2

如果你想双向绑定item.estimatedDate，你应该使用[(ngModel)].

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

请参阅此 plunker以获取演示。