Привязка API DateTime к угловой 6 DatePicker

Question

Я пытаюсь привязать столбец DateTime из базы данных SQL Server к Angular Material DatePicker. Всякий раз, когда DatePicker теряет фокус, он выделяется красным, как будто он недействителен. Передача данных происходит / устанавливается в обоих направлениях, но при этом возникает ошибка.

Основная функция заключается в том, что API C # возвращает данные JSON, такие как { "endDate": "2019-01-16T00:00:00" }. Angular использует это и помещает в модель, связанную с полем mat-form-field. Тип данных C # DateTime, как и тип данных SQL Server.

Я думаю, что моя проблема заключается в формате даты между SQL Server / C # / Angular

HTML

<mat-form-field appearance="outline" style="width:200px">
    <mat-label>End Date</mat-label>
    <input matInput [matDatepicker]="endPicker" placeholder="Choose a date" [(ngModel)]="trainClass.endDate" name="endDate">
    <mat-datepicker-toggle matSuffix [for]="endPicker"></mat-datepicker-toggle>
    <mat-datepicker #endPicker></mat-datepicker>
</mat-form-field>

Компонент:

trainClass: ITrainClass = {} as ITrainClass;

Интерфейс:

export interface ITrainClass {
    endDate: Date;
}

Буду признателен за любую помощь!

Answer 1

После дополнительного тестирования, я думаю, я нашел проблему.Красный контур был связан с максимальной длиной HTML на входе.

Связанное значение из базы данных было в формате ISO («2019-04-28T00: 00: 00.000»).Поле показывало только «28/04/2019», но ошибка была в том, что базовыми данными была полная строка ISO, что нарушало максимальную длину.

Чтобы решить проблему, я обрезал полную строку ISOпросто быть датой, а затем связать ее.