web-dev-qa-db-fra.com

Date de saisie angulaire 2 non obligatoire pour la date

essayer de configurer un formulaire, mais pour une raison quelconque, l'entrée Date dans mon HTML n'est pas liée à la valeur de date de l'objet, malgré l'utilisation de [(ngModel)]

html:

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

composant de formulaire:

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

Classe d'utilisateur: 

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

    }
}

Une sortie de test révèle que la "nouvelle" Date actuelle est la valeur de l'objet, mais l'entrée ne met pas à jour la valeur de date de l'objet Utilisateur et ne reflète pas cette valeur, ce qui suggère qu'aucune des liaisons bidirectionnelles ne fonctionne. De l'aide serait grandement appréciée.

angulartypescriptangular2-forms
32
MoSheikh

Angulaire 2, 4 et 5:

la manière la plus simple: plunker

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

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 sauvegardée sous un format de chaîne du type "2016-10-06" au lieu du type Date (je n'ai pas essayé de savoir si cela aurait des conséquences négatives lors de la manipulation des données ou de l'enregistrement dans une base de données, par exemple). 

37
hakany

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

Angular 2 ignore complètement type=date. Si vous modifiez le type en text, vous verrez que votre input a une liaison bidirectionnelle.

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

Voici un très mauvais conseil avec un meilleur à suivre:

Mon projet utilisait à l'origine jQuery. Donc, j'utilise jQuery datepicker pour le moment, en espérant que l'équipe angulaire corrigera le problème initial. En outre, c'est un meilleur remplacement car il prend en charge plusieurs navigateurs. Pour info, input=date ne fonctionne pas dans Firefox.

Bon conseil: Il y a peu de bons Angular2 datepickers:

5
Andrei Zhytkevich

En .ts: 

today: Date;

constructor() {  

    this.today =new Date();
}

.html:

<input type="date"  
       [ngModel]="today | date:'yyyy-MM-dd'"  
       (ngModelChange)="today = $event"    
       name="dt" 
       class="form-control form-control-rounded" #searchDate 
>
3
user10121373

Selon HTML5, vous pouvez utiliser input type="datetime-local" Au lieu de input type="date".

Cela permettra à la directive [(ngModel)] de lire et d'écrire une valeur à partir du contrôle d'entrée.

Remarque: Si la chaîne de date contient 'Z', alors pour mettre en œuvre la solution ci-dessus, vous devez supprimer le caractère 'Z' à partir de la date.

Pour plus de détails, veuillez parcourir cette lien sur les documents mozilla.

1
Shivam

Si vous utilisez un navigateur moderne, il existe une solution simple.

Tout d’abord, attachez une variable de modèle à l’entrée.

<input type="date" #date />

Puis passez la variable dans votre méthode de réception.

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

Dans votre contrôleur, acceptez simplement le paramètre sous le type HTMLInputElement Et utilisez la méthode valueAsDate sur HTMLInputElement.

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

Vous pouvez ensuite manipuler la date de toute façon comme une date normale.

Vous pouvez également définir la valeur de votre <input [value]= "..."> comme vous le feriez normalement.

Personnellement, en tant que personne essayant de rester fidèle au flux de données unidirectionnel, j'essaie d'éviter les liaisons de données bidirectionnelles dans mes composants.

0
Daniel Ashcraft

utiliser DatePipe 

> // ts file

import { DatePipe } from '@angular/common';

@Component({
....
providers:[DatePipe]
})

export class FormComponent {

constructor(private datePipe : DatePipe){}

    demoUser = new User(0, '', '', '', '', this.datePipe.transform(new Date(), 'yyyy-MM-dd'), '', 0, [], []);  
}
0
M Rameez