离子 2:两个返回相同值的日期时间字段

Question

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

该目录

<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没有改变。

关于为什么会这样的任何想法？

Answer 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 每次更改变量时都会更新变量。 可能是让它工作的最简单方法。