angular - 禁用 matDatePicker [Angular Material] 上的输入

Question

嘿，我从角度材料中输入了日期选择器，我尝试禁用该值并让用户仅从日期选择器日历中进行选择，它对我不起作用。

这是我的输入：

<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>

问题是用户可以插入错误的输入，我想阻止用户输入这些输入。

我尝试用谷歌搜索并阅读参考资料，但没有什么对我不起作用。

标签： angularangular-material

Answer 1

如果您尝试disabled在 HTML 组件中禁用输入，您会在控制台（反应形式）中看到警告。

为了能够避免这种情况，您可以禁用 a FormControlwith

 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>