Entrée de date angulaire 2 non liée à la valeur de date

Question

essayer d'obtenir un formulaire de mise en place mais pour une raison quelconque, la Date d'entrée dans mon code html n'est pas de liaison à l'objet de la date de valeur, en dépit de l'aide de [(ngModel)]

html:

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

composant formulaire:

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

L'utilisateur de la classe:

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 test de sortie révèle le courant de la "nouvelle" Date comme l'objet de valeur, mais l'entrée n'a pas de mise à jour de l'Utilisateur de l'objet de valeur de date ou de tenir compte de la valeur, ce qui suggère une ni l'autre des liaisons bidirectionnelles sont de travail. De l'aide serait grandement appréciée.

Answer 1

Angulaire 2, 4 et 5 :

la manière la plus simple: plunker

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

Answer 2

Au lieu de [(ngModel)], vous pouvez utiliser:

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

Vous pouvez également choisir de ne pas utiliser la fonction parseDate. Dans ce cas, la date sera enregistrée au format chaîne comme "2016-10-06" au lieu du type Date (je n'ai pas essayé si cela a des conséquences négatives lors de la manipulation des données ou de l'enregistrement dans la base de données par exemple).

Answer 3

Dans votre composant

 let today: Date;

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

et dans votre html

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

Answer 4

Angulaire 2 ignore complètement type=date. Si vous changez de type d' text vous verrez que votre input a les deux sens de la liaison.

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

Ici est assez mauvais conseiller avec la meilleure à suivre:

Mon projet à l'origine utilisé jQuery. Donc, je suis à l'aide d' jQuery datepicker pour l'instant, en espérant que angulaires de l'équipe va réparer le problème d'origine. C'est également un meilleur remplacement, parce qu'il a en charge des navigateurs. Pour info, input=date ne fonctionne pas dans Firefox.

De bons conseils: Il y a quelques très bons 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 5

Comme par HTML5, vous pouvez utiliser input type="datetime-local" au lieu de input type="date".

Il permettra à l' [(ngModel)] directive à lire et à écrire valeur de l'entrée de contrôle.

Remarque: Si la date chaîne de caractères contient 'Z', puis de mettre en œuvre les solutions ci-dessus, vous avez besoin de couper le " Z " de caractère à partir de la date.

Pour plus de détails, s'il vous plaît aller à travers ce lien sur mozilla docs.