Angulaire 6 format de Date MM/jj/aaaa en forme réactive

Je suis en utilisant Angulaire 6 avec des formes réactives et je suis à essayer de comprendre comment le format de la date valeur renvoyée par une webapi. La date est affiché comme 1973-10-10T00:00:00 et je veux la formater en 10/10/1973. Ci-dessous est le code pour récupérer les données et de les afficher. La webapi json dob valeur est 1973-10-10T00:00:00. Le dob valeur dans le modèle est de type Date.

html

<input formControlName="dob" type="text" [value]="dob | date: 'MM/dd/yyyy'" class="form-control" />

forme contraignante

this.userInfoForm = this.fb.group({
      'userId': ['', [Validators.required]],
      'dob': ['', [Validators.required]]
});

chargement économie d'

this.as.accountUserInfo(this.activeRoute$.ActiveUserId).subscribe(data => {
      this.userInfoModel$ = data as UserInfoModel;
      this.userInfoForm.patchValue(this.userInfoModel$);
});

appel d'api

accountUserInfo(userId: number) {
return this.http.post(this.url + "UserInfo", userId)
.pipe(
  retry(3),
  catchError(this.handleError)
)}

J'apprécie toute l'aide ou des conseils comme comment transformer la date du jj/MM/aaaa. Réglage de l'html pour la date de valeur ne faire paraître ok, mais je ne veux pas utiliser le navigateur intégré affiche la date, donc j'ai besoin de convertir une chaîne de caractères.

Merci d'avance.

après vous avez l'utilisation de la date de la pipe qu'est-ce que le résultat
Rien ne change. La date s'affiche toujours comme 1973-10-10T00:00:00. J'ai même essayé de forcer une valeur statique de [valeur]='le 01/01/2000 et c'est encore 1973-10-10T00:00:00.
Voici une meilleure solution que celle acceptée stackoverflow.com/questions/39607568/...

InformationsquelleAutor user1041169 | 2018-07-29

-2

Cela fonctionne pour moi :
Je patchValue la forme avec une transformée de date à l'aide de cette fonction
```
fromJsonDate(jDate): string {
  const bDate: Date = new Date(jDate);
  return bDate.toISOString().substring(0, 10);  //Ignore time
}
```
Dans la forme ( les formes réactives ) j'utilise :
```
<input type="date" formControlName="dob" class="form-control">  //No value
```
Le navigateur affiche le construit dans le sélecteur de date et les formats de la date en fonction de l'Utilisateur paramètres du système d'exploitation.

Puis à la poste (enregistrer) les valeurs de l'api web que je transforme à nouveau en utilisant :
```
toApiDate(bDate) {
  const apiDate: string = new Date(bDate).toUTCString();
  return apiDate;
}
```
- Je Utiliser toUTCString() parce que mes utilisateurs ne peuvent pas être dans le même fuseau horaire que mon serveur ( en fait, je ne suis pas ).
- Cela me conduire sur le droit chemin pour qu'il fonctionne. J'ai fini par enlever la valeur dans le code html. Je l'avais soupçonné, et SiliconSoul confirmé, la valeur est remplacée par des formes réactives. J'ai juste l'ajout d'un correctif de valeur pour le dob après j'ai patché l'ensemble de l'objet. c'.userInfoForm.patchValue(ce.userInfoModel$); if (ce.userInfoModel$ != null) { cela.userInfoForm.patchValue({ date de naissance: cette.dp.transformer(ce.userInfoModel$.dob, "MM/dd/yyyy') }); }
- Si la date n'est pas modifiée par l'utilisateur, vous sont en train de perdre la composante temporelle de la date initiale.
InformationsquelleAutor wFitz

Eu le même problème lors de l'utilisation de datepicker.
La solution est simple: Changer le type "date"

Avant:

<input type="text" class="form-control" placeholder="dd/mm/yyyy"
            formControlName="inputNascimento" ngbDatepicker #d="ngbDatepicker">

Après:

<input type="date" class="form-control" placeholder="dd/mm/yyyy"
            formControlName="inputNascimento" ngbDatepicker #d="ngbDatepicker">

InformationsquelleAutor Fernando Raposo

1

Si vous voulez de date différents formats d'heure d'aller avec momentjs

Momentjs fonctionne très bien avec angulaire de toutes les versions et donner différents types de formats de

d'abord importer momentjs comme ceci:

importation * en tant que moment de "moment";

Si vous souhaitez passer votre propre format que vous pouvez également passer comme

sysdate = moment().format ("MMMM Ne AAAA, h:mm a');

et la momentjs lien ci-dessous ici

momentjs
- Merci pour le partage de cette bibliothèque. Il a l'air vraiment utile, mais mon problème n'était pas la façon de formater une date, mais plutôt comment pousser le format de la vue.
InformationsquelleAutor Vijayakumar Mural

Vous pouvez transformer le format de la date lorsque vous vous abonnez, depuis la date de la pipe opérateur ne fonctionne pas dans formControlName.

this.as.accountUserInfo(this.activeRoute$.ActiveUserId).subscribe(data => {

      this.userInfoModel$ = data as UserInfoModel;
var datePipe=new DatePipe("en-US");

this.userInfoModel$.dob=datePipe.transform(this.userInfoModel$.dob,'MM/dd/yyyy');

      this.userInfoForm.patchValue(this.userInfoModel$);
});


<input formControlName="dob" type="text" class="form-control" />

Espère que cela aide!

InformationsquelleAutor Engineer

0

Il ne sera pas question ce qui est défini avec la valeur de liaison parce que vous avez spécifié le formControlName qui remplacent n'importe quelle valeur. Semble que vous pouvez utiliser le DatePipe pour le format de la date à laquelle elle est définie à l'FormGroup:
https://stackblitz.com/edit/angular-3tp7yz?file=src%2Fapp%2Fapp.component.ts
- Je suis à l'aide d'un objet observable, donc je n'ai pas la possibilité de le charger en ligne.
InformationsquelleAutor SiliconSoul

Vous devez vous connecter pour publier un commentaire.