CODEWITHSUNDEEP
angulardatepickerangular-material
Dombi
Dombi

Reputation: 37

Angular - Disable datepicker after toggle switch

I'm using angular material. I want to disable datepicker after switching slide toggle.

My upload form with datepicker:

<form #uploadForm="ngForm" (keydown.enter)="$event.preventDefault()" (ngSubmit)="upload(uploadForm.valid)">
  <div class="input-wrapper">
    <mat-form-field>
      <input
        id="date"
        name="date"
        [(ngModel)]="model.date"
        [disabled]="uploadForm.submitted"
        [matDatepicker]="datepicker"
        [matDatepickerFilter]="dateFilter"
        [min]="minDate"
        [max]="maxDate"
        placeholder="Expiration date"
        #date="ngModel"
        autocomplete="off"
        matInput
        readonly
        required />
      <mat-datepicker-toggle matSuffix [for]="datepicker"></mat-datepicker-toggle>
      <mat-datepicker touchUi #datepicker></mat-datepicker>
    </mat-form-field>
    <div class="tooltip" *ngIf="model.file && date.invalid">This field is required.</div>
    <mat-slide-toggle
      (change)="setMaxExpirationDate($event)">Set expiration date to 90 days</mat-slide-toggle>
  </div>

Now slide toggle only sets max expiration date in my app. I want to also disable datepicker after switching it. How can I achieve that?

Upvotes: 0

Views: 9825

Answers (1)

Agash Thamo.
Agash Thamo.

Reputation: 748

I assume you want to disable the datepicker once the slide is on true. I made a simplified version of your code on stackblitz. Take a look at the file app/datepicker-overview-example.ts where your setMaxExpirationDate resides. There simply change a variable to the value of the toggle. You need to add the variable to your disabled attribute of your datepicker as you can see in the file app/datepicker-overview-example.html.

Here's my stackblitz: https://stackblitz.com/edit/angular-8x48eo

Please go over the basics of Typescript, Angular and Angular Material, there are a lot of how-to's and guides, a lot of documentation and sample projects. Complete these as they will help you understand and solve small problems like this on your own.

Edit: I forgot to mention, in your code the datepicker is readonly anyways, so there shouldn't be a way to edit it, you should remove that if you want the user to be able to use the datepicker and change it's value.

Upvotes: 1

Related Questions