Question

我正在使用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似乎没有变化。

有关为何会这样做的任何想法？

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将在每次更改时更新变量。让它发挥作用的可能最简单的方法。

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

1 个答案: