使用响应式表单时禁用（设为只读）mat-datepicker 上的文本输入

Question

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

detailed instructions in the Angular Material 2 docs 介绍了如何禁用 mat-datepicker 的不同部分，但是，这些似乎没有涵盖如何禁用作为响应式表单的一部分的文本输入。

Angular Material 文档建议您通过以下方式禁用文本输入：

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

但是，如果您的日期选择器是响应式表单的一部分，则文本元素将保持活动状态，并且您会从 Angular 收到以下消息：

您似乎正在使用带有反应形式的 disabled 属性 指示。如果在设置此控件时将 disabled 设置为 true 您的组件类， disabled 属性实际上将设置在 给你的 DOM。我们建议使用这种方法来避免“更改 检查后的错误。 例子： form = new FormGroup({ first: new FormControl({value: 'Nancy', disabled: true})});

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

是否有解决此问题的方法，它不涉及使用 ngModel 仅针对 mat-datepicker(s) 使用单独的模板驱动表单？

编辑： 在帖子标题中添加了“只读”以澄清这不是禁用控件 - 因为我要问的是使输入元素只读，但不是禁用自我控制

Answer 1

创建一个禁用的FormControl 非常简单。

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

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

Answer 2

要扩展developer033 的答案，动态切换input 的readonly 状态，请使用组件变量修改readonly 属性。

以只读方式动态切换

见Stackblitz Demo。

app.component.html

<input matInput 
  [readonly]="inputReadonly"   <!-- Update `readonly` property using variable -->
  [matDatepicker]="dateJoined" 
  placeholder="Date joined" 
  formControlName="dateJoined">

app.component.ts

import {Component} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {VERSION} from '@angular/material';

@Component({
  selector: 'material-app',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  formGroup: FormGroup;
  inputReadonly = true;
  version = VERSION;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.formGroup = this.formBuilder.group({
      dateJoined: ''
    });
  }

  public toggleInputReadonly() {
    this.inputReadonly = !this.inputReadonly;
  }
}

Answer 3

这有助于我们禁用输入：

<mat-form-field appearance="fill">
    <mat-label>Input disabled</mat-label>
    <input matInput [matDatepicker]="dp3" disabled>
    <mat-datepicker-toggle matSuffix [for]="dp3"></mat-datepicker-toggle>
    <mat-datepicker #dp3 disabled="false"></mat-datepicker>
</mat-form-field>

Ref