时间戳

首页 > 解决方案 > 无法以编程方式禁用角度材料日期选择器

angular - 无法以编程方式禁用角度材料日期选择器

问题描述

我无法使用 typescript disable() 方法禁用角度日期选择器。如果我在 HTML 中设置 Disabled 属性就可以了。任何想法我做错了什么？

HTML：

...
<mat-label>Mark and Meet: *</mat-label>
<mat-radio-group required formControlName="rbgMarkMeet" (change)="MarkMeetChange()">
  <mat-radio-button value=1>Yes</mat-radio-button>
  <mat-radio-button value=2 [checked]="true">No</mat-radio-button>
</mat-radio-group>
<mat-form-field appearance="outline">
  <mat-label>Meeting Location:</mat-label>
  <input matInput type="text" formControlName="meetingLocation" required>
</mat-form-field>
<mat-form-field appearance="outline">
  <mat-label>Meeting Date:</mat-label>
  <input matInput [matDatepicker]="pickerMeetDate">
  <mat-datepicker-toggle matSuffix [for]="pickerMeetDate"></mat-datepicker-toggle>
  <mat-datepicker #pickerMeetDate></mat-datepicker>
</mat-form-field>
 ...

打字稿：

...
 MarkMeetChange(){
     if (this.markStaffWorkForm.get('rbgMarkMeet').value == 1) {//onsite mark and meet 
       this.markStaffWorkForm.get('meetingLocation').enable();
      this.markStaffWorkForm.get('pickerMeetDate').enable();
    }
    else {
      this.markStaffWorkForm.get('meetingLocation').disable();
      this.markStaffWorkForm.get('pickerMeetDate').disable();
    }
}
...

Stackblitz 在这里：https ://stackblitz.com/edit/angular-ewa1kj-kg5rtd?file=app/date-picker-prob.ts

谢谢

皮特

标签： angularangular-material

解决方案

您可以在 .ts 文件中创建一个变量来禁用/启用您的日期选择器。

<input [disabled]="isDisabled" matInput [matDatepicker]="pickerMeetDate">

Just set this variable to the value of radio btn (if I understood it correctly, when no is selected then datepicker has to be disabled)

推荐阅读