O tubo angular de data não funciona corretamente na caixa de texto
Meu Date Pipe não está funcionando no Angular. Só quero mostrar como este formato MM / dd / aaaa '. Como pode ser consertado?
Texto datilografado:
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)
});
Registro do console: Quarta, 22 de julho de 2020 17:18:24 GMT-0700 (horário de verão do Pacífico)
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>

A data não está sendo mostrada como MM / dd / aaaa e tem data / hora, horas, segundos adicionais, etc.
Respostas
Olha, você não pode usar value e formControlName ao mesmo tempo. Também mostra o valor do controle do formulário em vez do valor por atributo de valor.
Você precisa adicionar alguma solução alternativa para isso. Como isso
<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);
}
Eu li a resposta de Ashot Aleqsanyan que eu acho que está certa, eu não percebi antes que você definiu o valor no formulárioControl e na própria entrada, o que parece muito errado.
você pode tentar com a solução dele ou também tentar injetar o tubo de data diretamente em seu componente e usá-lo assim:
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)
});
}
}
(Presumi que você fizesse sua inicialização no OnInit, de qualquer forma, você pode mover o código ao redor do componente como quiser, é claro)
Acho que isso deve funcionar bem :)