cant disable an angular material date picker programmatically

Question

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

thanks, that works for the disabling -- any idea why the datepicker always evaluates to invalid??, even when you supply a date value?? — pvitt
– pvitt, Commented Apr 8, 2021 at 22:00

nesmeyana · Accepted Answer · 2021-04-08 21:00:45Z

4

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)

answered Apr 8, 2021 at 21:00

nesmeyana

2061 gold badge2 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

pvitt Over a year ago

thanks, that does work for disabling the date picker, strangely the date picker always evaluates to invalid -- even when a date is chosen. see the stackblitz in comment above.

pvitt Over a year ago

problem with the datepicker always invalid was that I forgot to include formControlName="pickerMeetDate" in the html. The disable() method is also now working

nesmeyana Over a year ago

hi, yes, that is another way :)

Collectives™ on Stack Overflow

cant disable an angular material date picker programmatically

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related