使用反应形式时,禁用mat-datepicker上的文本输入

Question

我正在使用Angular Material 2 mat-datepicker并希望禁用输入元素,因此用户无法使用文本输入编辑值.

有在角材料详细说明2个文档有关如何禁用的不同部分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,则实际将在DOM中为您设置disabled属性.我们建议使用此方法来避免"检查后更改"错误.示例:form = new FormGroup({first:new FormControl({value:'Nancy',disabled:true})});

我更新了FormGroup组件中的禁用FormControl,它具有禁用输入所需的效果,但是,如果您随后获取FormGroup使用this.form.value禁用表单控件的值不再存在.

有没有解决这个问题,不涉及使用ngModel仅用于mat-datepicker 的单独的模板驱动形式？

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的答案，动态切换readonly状态，使用组件变量input修改属性。readonly

动态切换只读

请参阅Stackblitz 演示

应用程序组件.html

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

应用程序组件.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;
  }
}