Отключить ввод в matDatePicker [Angular Material] - PullRequest
Новая
       5

Отключить ввод в matDatePicker [Angular Material]

0 голосов
/ 03 октября 2019

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

Это мой ввод: 

<p class="p-rtl">
    <mat-form-field class="input-min" appearance="fill">
        <mat-label>Finish Date</mat-label>
        <input matInput [matDatepicker]="picker" placeholder="Choose a date" [formControl]="date">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>
</p>

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

Я пытаюсь зайти в Google и прочитать ссылку, и ничего не работает дляя.

enter image description here

1 Ответ

1 голос
/ 03 октября 2019

Если вы пытаетесь отключить ввод с помощью disabled в компоненте HTML, у вас есть предупреждение в консоли (реактивная форма).

Чтобы избежать этого, вы можете отключить FormControl с помощью

 date: new FormControl({value: null, disabled: true})

Затем, чтобы быть уверенным, что пользователь не может написать что-либо, вы можете вставить атрибут readonly в шаблон 

<p class="p-rtl">
    <mat-form-field class="input-min" appearance="fill">
        <mat-label>Finish Date</mat-label>
        <input matInput readonly [matDatepicker]="picker" placeholder="Choose a date" [formControl]="date">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>
</p>
...