Angular 使用反应式表单时，禁用mat datepicker上的（只读）文本输入

我正在使用Angular Material 2的

mat datepicker

，希望禁用输入元素，以便用户无法使用文本输入编辑值

关于如何禁用

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>

//将禁用的属性添加到输入元素======
//将[disabled]=false添加到mat日期选择器=======

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

看起来您正在将disabled属性用于被动表单 指令。如果在中设置此控件时将disabled设置为true 在组件类中，禁用的属性实际上将在 这是给你的。我们建议使用此方法以避免“更改” 检查“错误”后。 例子： form=newformgroup（{first:newformcontrol（{value:'Nancy'，disabled:true}）}）

我更新了组件中的

FormGroup

，以禁用

FormControl

，这具有禁用输入的预期效果，但是，如果您随后使用

this.form.value

获取

FormGroup

的值，则禁用的表单控件将不再存在

是否有一种解决方法，不涉及使用

ngModel

仅针对mat日期选择器的单独模板驱动表单？

---

编辑：在文章标题中添加了“只读”以澄清这不是关于禁用控件的问题-因为我想问的是使输入元素只读，而不是禁用控件本身

创建禁用的

表单控件

非常简单

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

要展开的答案，要动态切换
输入的
只读
状态，请使用组件变量修改
只读
属性

动态切换只读
看

app.component.html
这有助于我们禁用输入：

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


输入禁用

有没有一种解决方案可以让您获得像禁用输入样式那样的输入样式？因为使用readonly的输入会阻止编辑，但不会像非Reactive表单中的材质示例那样更改样式。请告诉我如何在某些操作上以编程方式启用它？@PushkarKathuria有关如何以编程方式启用/禁用
只读
，请参阅下面的答案。感谢提供更多信息。当你需要的时候，你可以让属性的值变得动态，这一点总是很好。感谢这个答案，它清楚地表明我需要澄清标题。我所追求的是如何使输入元素只读，而不是禁用控件
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;
  }
}

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