Указанное значение даты не соответствует требуемому формату Angular 5

Question

В моем приложении Angular я показываю данные от API к компоненту в полях ввода.

Все поля заполняются, но нет элемента ввода с типом Дата

Ниже html-разметка

<input [(ngModel)]="CustomerVM.customer.CustomerDob" type="date" name="MemberDateOfBirth" class="form-control" 
          (blur)="Calculate_Age(CustomerVM.customer.CustomerDob)">

В консоли выдается

Указанное значение «2018-09-21T00: 00: 00» не соответствует требуемому формату «гггг-ММ-дд».

Я сделал общую функцию для форматирования даты в сервисе как

FormatDate(iDate: Date) {
var inputDate:Date= new Date(iDate);
var formattedDate = new Date(inputDate.getUTCDate(), (inputDate.getUTCMonth() + 1), inputDate.getUTCFullYear());
return formattedDate;

}

и

this.CustomerVM.customer.CustomerDob = this.Helper.FormatDate(this.CustomerVM.customer.CustomerDob);

, но это делаетне показывать значение в поле даты

внутри блока интерполяции, мы можем отформатировать значение, используя каналы

{{DOB | date:'mediumDate'}}

Можем ли мы сделать это и с помощью ngModel?потому что я не хочу, чтобы метод отформатировал его.

Как мне этого добиться?

Answer 1

Ответ даты в формате Timestamp.Значение метки времени не заполняет ваше поле даты, поэтому вам необходимо преобразовать формат метки времени в формат даты.

var datePipe = new DatePipe("en-US"); let formatedyear = datePipe.transform(this.CustomerVM.customer.CustomerDob, 'MM/dd/yyyy'); this.CustomerVM.customer.CustomerDob = formatedyear;

, а затем импортировать {DatePipe} из '@ angular / common';в вашем компоненте

Answer 2

Выражения действий не могут включать каналы.Вы можете реализовать более сложную привязку, разделив двустороннюю привязку, предоставляемую [(ngModel)], на привязку свойств и привязку событий.Канал даты затем может быть включен в выражение привязки свойства:

<input [ngModel]="item.value | date:'yyyy-MM-dd'" (ngModelChange)="item.value=$event" type="data" />

---

Тег input из вашего примера будет выглядеть примерно так:

<input [ngModel]="CustomerVM.customer.CustomerDob | date:'yyyy-MM-dd'" (ngModelChange)="CustomerVM.customer.CustomerDob=$event" type="date" name="MemberDateOfBirth" class="form-control" (blur)="Calculate_Age(CustomerVM.customer.CustomerDob)">

Answer 3

Ваш сервис должен выглядеть так:

FormatDate(iDate: Date) {
   var inputDate = new Date(iDate);
   var formattedDate = inputDate.getFullYear()+'-'+(inputDate.getMonth() + 1)+'-'+ 
   inputDate.getDate();
   return formattedDate;
}

И в вашем файле ts должно быть так:

let newDate = new Date(this.CustomerVM.customer.CustomerDob);
this.CustomerVM.customer.CustomerDob = this.Helper.FormatDate(newDate);