cant disable an angular material date picker programmatically

  angular, angular-material

I’m having trouble disabling an angular datepicker using typescript disable() method. If I set the Disabled property in HTML its ok. Any ideas what I’m doing wrong?

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

TypeScript:

...
 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 is here: https://stackblitz.com/edit/angular-ewa1kj-kg5rtd?file=app/date-picker-prob.ts

thanks

Pete

Source: Angular Material Quesions

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.