Angular 2-Datumseingabe ist nicht mit dem Datumswert verbunden

versuchen, um ein Formular einzurichten, aber aus irgendeinem Grund, das Datum, den Eingang in mein html ist nicht die Bindung an das Objekt date-Wert, trotz der Verwendung von [(ngModel)]

html:

<input type='date' #myDate [(ngModel)]='demoUser.date'/><br>

form-Komponente:

export class FormComponent {
    demoUser = new User(0, '', '', '', '', new Date(), '', 0, [], []);  
}

User-Klasse:

export class User {
    constructor (
        public id: number,
        public email: string,
        public password: string,
        public firstName: string,
        public lastName: string,
        public date: Date,
        public gender: string,
        public weight: number,
        public dietRestrictions: string[],
        public fitnessGoals: string[]
    ){

    }
}

Einem test-Ausgabe zeigt die aktuelle "neue" Datum, als das Objekt Wert ist, aber die Eingabe nicht aktualisieren Sie das Benutzer-Objekt date-Wert oder den Wert widerzuspiegeln, was weder der zwei-Wege-Bindungen arbeiten. Hilfe würde sehr geschätzt werden.

InformationsquelleAutor der Frage MoSheikh | 2016-07-03

45

Winkel-2 , 4 und 5 :

der einfachste Weg : plunker
```
<input type="date" [ngModel] ="dt | date:'yyyy-MM-dd'" (ngModelChange)="dt = $event">
```
InformationsquelleAutor der Antwort Bougarfaoui El houcine
34

Anstelle von [(ngModel)] die Sie verwenden können:
```
//view
<input type="date" #myDate [value]="demoUser.date | date:'yyyy-MM-dd'" (input)="demoUser.date=parseDate($event.target.value)" />

//controller
parseDate(dateString: string): Date {
    if (dateString) {
        return new Date(dateString);
    } else {
        return null;
    }
}
```
Können Sie auch wählen, nicht zu verwenden parseDate Funktion. In diesem Fall wird das Datum gespeichert als format-string wie "2016-10-06" anstelle von Datum, Art (ich habe nicht versucht, ob dies hat negative Auswirkungen bei der Manipulation der Daten oder speichern in der Datenbank zum Beispiel).

InformationsquelleAutor der Antwort hakany
5

Winkel 2 komplett ignoriert type=date. Wenn Sie den Typ ändern, um text Sie werden sehen, dass Ihre input hat zwei-Wege-Bindung.
```
<input type='text' #myDate [(ngModel)]='demoUser.date'/><br>
```
Ist hier ziemlich schlecht beraten mit besseren Folgen:

Mein Projekt ursprünglich jQuery. Also, ich bin mit jQuery datepicker für jetzt, in der Hoffnung, dass die angular-team behebt das ursprüngliche Problem. Auch ist es einen besseren Ersatz, denn es hat cross-browser-Unterstützung. FYI, input=date funktioniert nicht in Firefox.

Gut beraten: Es gibt einige ziemlich gute Angular2 datepickers:
InformationsquelleAutor der Antwort Andrei Zhytkevich

In der Komponente

let today: Date;

ngOnInit() {
  this.today = new Date().toISOString().split('T')[0];
}

und in Ihre html -

<input name="date" [(ngModel)]="today" type="date" required>

InformationsquelleAutor der Antwort Matiullah Karimi

1

Als pro HTML5, die Sie verwenden können
input type="datetime-local"
statt
input type="date".

Wird es ermöglichen, die [(ngModel)] Richtlinie zu Lesen und zu schreiben mit dem Wert aus dem input-regler.

Hinweis:Wenn der Datum-string enthält '' Z ' für die Umsetzung der oben genannten Lösung, die Sie brauchen, um schneiden Sie die 'Z' - Zeichen vom Datum.

Weitere details, bitte gehen Sie durch diese link auf mozilla docs.

InformationsquelleAutor der Antwort Shivam
0

Wenn Sie einen modernen browser, es gibt eine einfache Lösung.

Ersten, fügen Sie eine template-variable, um die Eingabe.
```
<input type="date" #date />
```
Dann übergeben Sie die variable in Ihrem Erhalt Methode.
```
<button (click)="submit(date)"></button>
```
In Ihrem controller übernehmen Sie einfach den parameter als Typ HTMLInputElement
und die Methode valueAsDate auf die HTMLInputElement.
```
submit(date: HTMLInputElement){
    console.log(date.valueAsDate);
}
```
Anschließend können Sie manipulieren das Datum eh einen normalen Termin.

Können Sie auch den Wert Ihrer <input [value]= "..."> als Sie
normalerweise würde.

Persönlich, als jemand, der versucht treu zu bleiben der unidirektionale Datenfluss, ich versuche zu bleiben Weg von der zwei-Wege-Datenbindung in meinen Komponenten.

InformationsquelleAutor der Antwort Daniel Ashcraft
-1

können Sie eine Problemumgehung, wie diese:
```
<input type='date' (keyup)="0" #myDate [(ngModel)]='demoUser.date'/><br>
```
auf Ihre Komponente :
```
 @Input public date: Date,
```
InformationsquelleAutor der Antwort tecnocrata

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.