CODEWITHSUNDEEP
angularangular-material
pvitt
pvitt

Reputation: 1065

cant disable an angular material date picker programmatically

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

Upvotes: 1

Views: 2769

Answers (1)

nesmeyana
nesmeyana

Reputation: 206

You could create a variable in your .ts file that disables/enables your datepicker.

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

Upvotes: 4

Related Questions