イオン2：同じ値を返す2つのdatetimeフィールド

Question

私はイオン2を使用しており、ユーザーが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は変わらないようです。

これがなぜ起こったのだろうか？

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> 

ngModelChange

<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> 

には、それが変更された変数のたびに更新されます。おそらくそれを働かせる最も簡単な方法です。