angolare 2 Data di ingresso non vincolanti al valore di data

Question

cercando di ottenere una forma set up, ma per qualche motivo, l'ingresso data nel mio html non è vincolante per valore di data dell'oggetto, nonostante l'uso di [(ngModel)]

html: componente

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

forma:

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

classe User:

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[] 
    ){ 

    } 
} 

Un output di test rivela la "nuova" data corrente come valore dell'oggetto, ma l'input non aggiorna il valore della data dell'oggetto User o riflette il valore, suggerendo che nessuno dei due collegamenti bidirezionali funziona. L'aiuto sarebbe molto apprezzato.

Answer 1

Angular 2 ignora completamente type=date. Se cambi il tipo in text vedrai che il tuo input ha un collegamento bidirezionale.

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

qui è abbastanza cattivo consiglio con migliore da seguire:

Il mio progetto originariamente utilizzato jQuery. Quindi, sto usando jQuery datepicker per ora, sperando che il team angolare risolverà il problema originale. Inoltre è un sostituto migliore perché ha il supporto per browser. FYI, input=date non funziona in Firefox.

buoni consigli: Ci sono pochi abbastanza bene Angular2 datepickers:

• https://github.com/emirdeliz/meus-projetos/tree/master/angular2-schedule/app/frontend/components/datepicker

• https://github.com/MrPardeep/Angular2-DatePicker

• https://www.npmjs.com/package/ng2-datepicker

Answer 2

Invece di [(ngModel)] è possibile utilizzare:

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

Si può anche scegliere di non utilizzare la funzione parsedate. In questo caso la data verrà salvata come formato stringa come "2016-10-06" invece di tipo Data (non ho ancora provato se questo ha conseguenze negative quando si manipolano i dati o si salva in un database, ad esempio).

Answer 3

angolare 2, 4 e 5:

il modo più semplice: plunker

<input type="date" [ngModel] ="dt | date:'yyyy-MM-dd'" (ngModelChange)="dt = $event"> 

Answer 4

è possibile utilizzare una soluzione alternativa, come questo:

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

sul componente:

@Input public date: Date, 

Answer 5

Se si utilizza un browser moderno, esiste una soluzione semplice.

Innanzitutto, allegare una variabile modello all'input.

<input type="date" #date /> 

Quindi passare la variabile nel metodo di ricezione.

<button (click)="submit(date)"></button> 

nel controller solo accettare il parametro come tipo HTMLInputElement e utilizzare il metodo valueAsDate sul HTMLInputElement.

submit(date: HTMLInputElement){ 
    console.log(date.valueAsDate); 
} 

È quindi possibile modificare la data in qualsiasi modo si sarebbe una data normale.

È anche possibile impostare il valore del proprio <input [value]= "..."> come si conviene allo standard .

Personalmente, come qualcuno che cerca di rimanere fedele al flusso di dati unidirezionale, cerco di stare lontano dall'associazione dei dati bidirezionale nei miei componenti.

Answer 6

nel componente

let today: Date; 

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

e nel tuo html

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