Форматирование даты и времени в типе ввода даты с Angular ngModel - PullRequest
Новая
       5

Форматирование даты и времени в типе ввода даты с Angular ngModel

0 голосов
/ 11 февраля 2020

У меня есть этот ввод, который является типом date, а мой dateOfDiagnosis представляет собой строку, поступающую от контроллера, которая включает в себя время, подобное этому

"2010-09-08T00: 00: 00 "

<input type="date" class="form-control" [(ngModel)]="claim.claimData.dateOfDiagnosis" (ngModelChange)="markDirty()" name="dateOfDiagnosis">

В сообщении об ошибке / предупреждении в консоли указано

Указанное значение "2010-09-08T00: 00: 00" не соответствует требуемый формат, «гггг-ММ-дд».

Итак, я попытался нарезать строку следующим образом 

[(ngModel)]="claim.claimData.dateOfDiagnosis.slice(0,10)"

, но это породило кучу ошибок.

Есть ли способ отформатировать его (удалить время) на стороне html, ничего не делая в файле .ts? Или сделать что-то еще, чтобы заставить это работать, не делая ничего в файле .ts?

Ошибка говорит:

Ошибка: Ошибки синтаксического анализа шаблона: Ошибка синтаксического анализатора: Неожиданный токен '= 'в столбце 44 в [Самоуправление (0,10) "(ngModelChange) =" markDirty () "name =" dateOfDiagnosis ">

1 Ответ

0 голосов
/ 12 февраля 2020

Проблема в том, что ngModel является двусторонней привязкой. Применение метода, подобного slice, работает, когда вы передаете значение, а не когда оно возвращается обратно. В развернутом виде ваша привязка ngModel выглядит следующим образом: 

[ngModel]="claim.claimData.dateOfDiagnosis.slice(0,10)" 
    (ngModelChange)="claim.claimData.dateOfDiagnosis.slice(0,10)=$event"

Строка 

claim.claimData.dateOfDiagnosis.slice(0,10)=$event

Не имеет смысла, и именно она вызывает вашу ошибку.

Есть несколько способов обойти это, в зависимости от конкретных c требований контекста.

Если поле dateOfDiagnosis не обязательно должно быть в формате 2010-09-08T00:00:00, вы можете просто позвоните 

this.claim.claimData.dateOfDiagnosis = this.claim.claimData.dateOfDiagnosis.slice(0,10);

, где она установлена, или вы можете использовать другую переменную для отслеживания даты в формате YYYY-MM-DD, и добавить T00:00:00, когда вы вернете ее назад к claim.claimData.dateOfDiagnosis.

Вы можете даже использовать израсходованную форму ngModel, чтобы сделать все это на месте. т.е.: 

[ngModel]="claim.claimData.dateOfDiagnosis.slice(0,10)" 
    (ngModelChange)="claim.claimData.dateOfDiagnosis = $event + 'T00:00:00'"
...