Блог

Главная - Вопросы по программированию - Как двусторонне привязать указатель даты Angular Material к свойству string

Как двусторонне привязать указатель даты Angular Material к свойству string

#javascript #angular #angular-material

#javascript #angular #angular-material

Вопрос:

Я использую компонент Angular Material datepicker, привязанный с помощью ngModel к строковому свойству, которое представляет дату. Используя MatMomentDateModule, значение ngModel является объектом Moment, а не объектом string, как хотелось бы. Как я могу использовать средство выбора даты для выбора даты и заставить ngModel выводить строковое представление этой даты?

Шаблон:

 <mat-form-field>
 <input matInput placeholder="Target Start Date" name="targetStartDatePicker"
            [matDatepicker]="targetStartDatePicker" [value]="visit.TargetStartDate" required>
 <mat-datepicker-toggle matSuffix [for]="targetStartDatePicker"></mat-datepicker-toggle>
 <mat-datepicker #targetStartDatePicker></mat-datepicker>
</mat-form-field>

Свойство контроллера:

public visit: Visit;

Модель Typescript:

 export class Visit {
    public TargetStartDate: string;
}

Комментарии:

1. Вы привязываете его к строке только из-за того, как он отображается?

2. Я привязываю его к строке, потому что это модель, которую я получаю от своего API, все даты представлены в виде строк. Было бы неплохо управлять этим строковым значением напрямую с помощью элемента управления datepicker и опубликовать модель для ее обновления. Прямо сейчас я отображаю его только в указателе даты.

3. Понял. Не уверен, что вы можете выполнить прямую двустороннюю привязку с использованием строки. Что вы можете сделать, так это привязать к dateChange event , который даст вам выбранную дату, а когда выбрана новая дата, вы преобразуете ее в нужный вам строковый формат и присваиваете ее своему свойству date.

4. посмотрите , помогает ли этот stackblitz и можете ли вы изменить его в соответствии с вашими потребностями.