web-dev-qa-db-fra.com

Angular 6 Format de date MM/jj/aaaa sous forme réactive

J'utilise Angular 6 avec des formulaires réactifs et j'essaie de comprendre comment formater la valeur de date renvoyée par un webapi. La date affichée est 1973-10-10T00: 00: 00 et je souhaite la formater au 10/10/1973. Vous trouverez ci-dessous le code permettant de récupérer les données et de les afficher. La valeur de la page Webapi json est 1973-10-10T00: 00: 00. La valeur dob dans le modèle est de type Date.

html

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

formulaire de reliure

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

chargement en cours 

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

appel api

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

J'apprécie toute aide ou conseil sur la manière de transformer la date au format MM/jj/aaaa. Définir html avec la valeur de date donne une apparence correcte, mais je ne souhaite pas utiliser les affichages de date du navigateur intégrés; je dois donc le convertir en chaîne.

Merci d'avance.

angulardateangular-reactive-forms
1
user1041169

Vous aviez le même problème lorsque vous utilisiez datepicker ..__ La solution était simple: changez le type d'entrée en "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">
2
Fernando Raposo

Si vous voulez différents formats de date/heure, allez avec momentjs 

Momentjs fonctionne bien avec angular toutes les versions et donne différents types de formats

premier moment d'importation comme ceci:

import * en tant que moment à partir de 'moment';

Si vous voulez passer votre propre format, vous pouvez aussi passer comme

sysdate = moment () format ('MMMM Do YYYY, h: mm a');

et le lien momentjs ci-dessous ici

momentjs

1
Vijayakumar Mural

Vous pouvez transformer le format de date lorsque vous le souscrivez, car l'opérateur de canal de données 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" />

J'espère que ça aide!

1
Engineer

Peu importe ce qui est défini avec la liaison de valeur, car vous avez spécifié le formulaireControlName qui remplacera toute valeur existante. On dirait que vous pouvez utiliser DatePipe pour formater la date à laquelle elle est définie sur le FormGroup: https://stackblitz.com/edit/angular-3tp7yz?file=src%2Fapp%2Fapp.component.ts

0
SiliconSoul