angular - Ionic 2：两个日期时间字段返回相同的值

我正在使用 Ionic 2，并尝试允许用户在两个独立的 ion-datetime 字段中选择日期和时间。

HTML

<form [formGroup]="newEventForm">
  ...
    <ion-item>
        <ion-datetime formControlName="date" displayFormat="MMM DD, YYYY" [(ngModel)]="eventDate" min="2017-01-01" max="2020-10-31"></ion-datetime>
    </ion-item>
    <ion-item>
        <ion-datetime formControlName="time" displayFormat="h:mm a" [(ngModel)]="eventTime"></ion-datetime>
    </ion-item>
    <ion-item>
        <button ion-button block default (click)="addEvent()">Add Event</button>
    </ion-item>
</form>

类型脚本：

export class NewEventPage {

    eventTime: String = new Date().toISOString();
    eventDate: String = new Date().toISOString();

    constructor(...) {
        ...
        this.newEventForm = formBuilder.group({
            ...,
            date: ['', Validators.compose([Validators.required])],
            time: ['', Validators.compose([Validators.required])]
        });
    }

    public addEvent() {
        if(!this.newEventForm.valid) {
            console.error("Validation problems");
        } else {
            console.log("Form is valid", this.newEventForm.value);
        }
    }
}

当我点击提交按钮时，我得到了所有内容，但我得到的日期和时间都是相同的，尽管我希望它们不同。它们都返回 date 的值，看起来 time 没有变化。

对于这可能的原因有何看法？

答案＃1

我会尝试改变...

<ion-item>
  <ion-datetime formControlName="date" displayFormat="MMM DD, YYYY" [(ngModel)]="eventDate" min="2017-01-01" max="2020-10-31"></ion-datetime>
</ion-item>
<ion-item>
  <ion-datetime formControlName="time" displayFormat="h:mm a" [(ngModel)]="eventTime"></ion-datetime>
</ion-item>

到

<ion-item>
  <ion-datetime formControlName="date" displayFormat="MMM DD, YYYY" [(ngModel)]="eventDate" (ngModelChange)="eventDate" min="2017-01-01" max="2020-10-31"></ion-datetime>
</ion-item>
<ion-item>
  <ion-datetime formControlName="time" displayFormat="h:mm a" [(ngModel)]="eventTime" (ngModelChange)="eventTime"></ion-datetime>
</ion-item>

ngModelChange 会在变量每次更改时更新它。 可能是让它工作的最简单方法。