Угловая трубка даты не работает правильно в текстовом поле

Question

My Date Pipe не работает в Angular. Я хочу показать только этот формат MM / dd / yyyy '. Как это исправить?

Машинопись:

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)
});

Протокол консоли: среда, 22 июля 2020 г., 17:18:24 GMT-0700 (тихоокеанское летнее время)

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>

Дата не отображается как ММ / дд / гггг и имеет дополнительные даты и время, часы, секунды и т. Д.

Answer 1

Послушайте, вы не можете использовать value и formControlName одновременно. Также он показывает значение элемента управления формы вместо значения по атрибуту значения.

Для этого вам нужно добавить обходной путь. Как это

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

Ц

funcFromTs(value: string) {
   this.userForm.get('createDate').patchValue(value);
}

Answer 2

Я прочитал ответ Ашота Алексаняна, который, по моему мнению, является правильным по деньгам, я раньше не замечал, что вы устанавливаете значение как в formControl, так и в самом вводе, что кажется совершенно неправильным.

вы можете попробовать его решение или также попытаться вставить канал даты непосредственно в свой компонент и использовать его следующим образом:

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)
});
  }
}

(Я предполагал, что вы выполняете свою инициализацию в OnInit, в любом случае вы можете перемещать код по компоненту, как хотите, конечно)

Я думаю, это должно хорошо работать :)