2017-01-25 4 views
1

Ich bin mit ionischen 2 und zu versuchen, einem Benutzer zu ermöglichen, ein Datum und eine Uhrzeit in zwei getrennten ion-datetime Feldern auszuwählen.Ionic 2: zwei Datetime-Felder gleichen Wert zurück

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

Typoskript:

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); 
     } 
    } 
} 

Wenn ich den Absenden-Button klicken, bekomme ich alles zurück, aber ich bin die gleiche Datums- und Uhrzeit sowohl für Datum und Zeit bekommen, auch obwohl ich möchte, dass es anders ist. Sie beide zurück, was auch immer die date ist und es scheint, die time ändert sich nicht.

Irgendwelche Gedanken darüber, warum das sein könnte?

Antwort

1

Ich würde versuchen zu ändern ...

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

zu

<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 wird die Variable jedes Mal aktualisieren, es geändert wird. Wahrscheinlich einfachste Art, es zum Laufen zu bringen.