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

【问题标题】：Ionic 2: two datetime fields returning same valueIonic 2：两个日期时间字段返回相同的值
【发布时间】：2017-06-10 18:31:32
【问题描述】：

我正在使用 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);
        }
    }
}

当我单击提交按钮时，我会恢复所有内容，但我会得到相同的 dateTime 日期和时间，即使我希望它有所不同。无论date 是什么，它们都返回，而且time 似乎没有改变。

对为什么会这样有什么想法吗？

【问题讨论】：

标签： datetime angular typescript ionic2

【解决方案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 将在每次更改时更新变量。可能是让它工作的最简单方法。

【讨论】：