Le tuyau de date angulaire ne fonctionne pas correctement dans la zone de texte

Dec 23 2020

Mon tuyau de date ne fonctionne pas dans Angular. Je veux seulement afficher ce format MM / jj / aaaa '. Comment peut-il être corrigé?

Manuscrit:

this.testDate = new Date(this.singleUser.createDate);
console.log(this.testDate); 

this.userForm = new FormGroup({
  userName: new FormControl(this.singleUser.userName),
  email: new FormControl(this.singleUser.email),
  createDate: new FormControl(this.singleUser.createDate)
});

Journal de la console: mercredi 22 juillet 2020 17:18:24 GMT-0700 (heure avancée du Pacifique)

HTML:

<mat-form-field class="row" appearance="outline" floatLabel="always">
    <mat-label>Created Date</mat-label>
    <input matInput [readonly]="true" formControlName="createDate" [value] = "testDate | date: 'MM/dd/yyyy'" >
</mat-form-field>

La date ne s'affiche pas sous la forme MM / jj / aaaa et comporte des heures supplémentaires, des heures, des secondes, etc.

Réponses

2 AshotAleqsanyan Dec 23 2020 at 02:24

Regardez, vous ne pouvez pas utiliser value et formControlName en même temps. Il affiche également la valeur de votre contrôle de formulaire au lieu de l'attribut valeur par valeur.

Vous devez ajouter une solution de contournement pour cela. Comme ça

<mat-form-field class="row" appearance="outline" floatLabel="always">
    <mat-label>Created Date</mat-label>
    <input matInput [readonly]="true" (change)="funcFromTs($event.target.value)" [value] = "testDate | date: 'MM/dd/yyyy'" >
</mat-form-field>

Ts

funcFromTs(value: string) {
   this.userForm.get('createDate').patchValue(value);
}
2 DarioPiotrowicz Dec 23 2020 at 02:20

J'ai lu la réponse d'Ashot Aleqsanyan qui, je pense, est juste sur l'argent, je n'avais pas remarqué auparavant que vous définissiez la valeur à la fois dans le formControl et dans l'entrée elle-même, ce qui semble tout à fait faux.

vous pouvez essayer avec sa solution ou aussi essayer d'injecter le tuyau de date directement dans votre composant et l'utiliser comme ceci:

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

@Component({
   providers: [DatePipe]   // you need to provide datepipe in providers list for your component
})
class YourComponent implements OnInit {

  constructor(private datePipe: DatePipe) {}

  ngOnInit(){
       // you don't want the testDate field
       // this.testDate = new Date(this.singleUser.createDate);

       const createDate = this.datePipe.transform(this.singleUser.createDate, 'yyyy-MM-dd');
       console.log(createDate); 

       this.userForm = new FormGroup({
         userName: new FormControl(this.singleUser.userName),
         email: new FormControl(this.singleUser.email),
         createDate: new FormControl(createDate)
});
  }
}

(J'ai supposé que vous faisiez votre initialisation dans OnInit, de toute façon vous pouvez déplacer le code autour du composant à votre guise bien sûr)

Je pense que cela devrait bien fonctionner :)