使用反应式表单时，禁用(设置为只读)MAT-DATEPPICER上的文本输入 [英] Disable (make read-only) text input on mat-datepicker when using a reactive form

问题描述

我正在使用角度材质2的mat-datepicker，并希望禁用输入元素，以便用户无法使用文本输入编辑值。

detailed instructions in the Angular Material 2 docs有detailed instructions in the Angular Material 2 docs关于如何禁用mat-datepicker的不同部分，但它们似乎不包括如何在文本输入是被动表单的一部分时禁用它。

角度材质文档建议您通过以下方式禁用文本输入：

<mat-form-field>
              // Add the disabled attribute to the input element ======
              <input disabled                          
                     matInput 
                     [matDatepicker]="dateJoined" 
                     placeholder="Date joined" 
                     formControlName="dateJoined">
              <mat-datepicker-toggle matSuffix [for]="dateJoined"></mat-datepicker-toggle>

              // Add [disabled]=false to the mat-datepicker =======
              <mat-datepicker [disabled]="false" 
                              startView="year"  
                              #dateJoined></mat-datepicker>
            </mat-form-field>

但是，如果您的DatePicker是反应式表单的一部分，则文本元素保持活动状态，并且您将从ANGLE收到以下消息：

看起来您使用的是带有被动形式的Disable属性 指令。如果在中设置此控件时将Disable设置为True 您的组件类中，禁用属性实际上将在 DOM是给你的。我们建议使用此方法来避免"已更改 在检查错误之后。 示例： Form=new FormGroup({first：new FormControl({Value：‘Nancy’，Disable：True})})；

我更新了组件中的FormGroup以禁用FormControl，这具有禁用输入的预期效果，但是，如果您随后使用this.form.value获取FormGroup的值，则禁用的表单控件将不再存在。

是否有解决此问题的方法，不涉及使用ngModel仅用于MAT-DATEPICER的单独模板驱动表单？

编辑：在帖子标题中添加了"只读"，以澄清这与禁用控件无关，因为我问的是将输入元素设置为只读，而不是禁用以控制其本身

推荐答案

创建禁用的FormControl非常简单。

1-不要在模板中使用禁用属性；

2-按如下方式实例化FormGroup：

this.formGroup = this.formBuilder.group({
  dateJoined: { disabled: true, value: '' }
  // ...
});

---

话虽如此，虽然您希望阻止用户在输入中键入内容，但您仍然希望让他们通过单击按钮(更具体地说是matSuffix)来选择日期，对吗？

如果正确，disable在这种情况下不起作用，因为它将禁用所有输入(包括matSuffix中的按钮)。

要解决您的问题，可以使用readonly。正常实例化FormGroup，然后在模板中实例化：

<input                          
  matInput 
  readonly <- HERE
  [matDatepicker]="dateJoined" 
  placeholder="Date joined" 
  formControlName="dateJoined">

DEMO

这篇关于使用反应式表单时，禁用(设置为只读)MAT-DATEPPICER上的文本输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！