Angular - Disable datepicker after toggle switch

Question

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?

The html you posted is malformed, can you post the entire chunk of your html? — Marko Francekovic
– Marko Francekovic, Commented Jul 31, 2018 at 9:29
Do i get you right, you want to disable the datepicker after the slide-toggle has been changed? Why don't you just disable it inside your setMaxExpirationDate() function? — Agash Thamo.
– Agash Thamo., Commented Jul 31, 2018 at 9:38
Yes, after slide-toggle has been changed. I was trying but I'm new in web dev and don't know how :P — Dombi
– Dombi, Commented Jul 31, 2018 at 9:40

Agash Thamo. · Accepted Answer · 2018-07-31 10:06:02Z

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.

Collectives™ on Stack Overflow

Angular - Disable datepicker after toggle switch

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related