小编ncl*_*arx的帖子

我正在使用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 的单独的模板驱动形式？