Открытый угловой коврик для датировки из машинописного текста

Question

У меня есть такой выбор:

 <mat-select placeholder="..." (change)="onChange($event.value)">
     <mat-option *ngFor="let option of options" [value]="option.value">
        {{ option }}
     </mat-option>
 </mat-select>
 <div class="disable">
    <mat-form-field>
       <input matInput [matDatepicker]="picker" placeholder="Choose a date">
       <mat-datepicker #picker ></mat-datepicker>
    </mat-form-field>
 </div>

отключить класс, просто скрыть содержимое div.

В моем onChange ($ event):

onChange(value) {
   if(value === 'someValue'){
       openDatePicker() //How to do this ??
   }
}

Если выбрано определенное значение, я бы хотел открыть палитру дат.Возможно ли это сделать из машинописи?

Спасибо за ваш ответ

Answer 1

создать объект выбора даты, используя ViewChild в TS как:

@ViewChild('picker') datePicker: MatDatepicker;

Использовать предопределенный метод open из MatDatepicker как:

onChange(value) {
   if(value === 'someValue'){
       this.datePicker.open();
   }
}

Answer 2

Вам необходимо получить указатель даты в вашем коде, используя ViewChild, например:

@ViewChild('picker') datePicker: MatDatepicker<Date>;

Затем в своей функции вы можете вызвать метод указателя даты open():

onChange(value) {
   if(value === 'someValue'){
       this.datePicker.open();
   }
}

Ссылка на Демонстрация StackBlitz .