CODEWITHSUNDEEP
angular2-formsangular-material2
sboggs11
sboggs11

Reputation: 199

Angular2 Material2 - How to disable/enable mat-datepicker-toggle on form rebuild

Angular version 5.2.4, Material2 5.2.4

I am using this combination of elements:

...in a form that rebuilds when the datasource changes.

I am able to set the input and the mat-datepicker-toggle to disabled, or enabled, in the initial form build. When the form is rebuilt, the disabled property of the input is settable. However, the disabled property of the mat-datepicker-toggle remains at the initial state (whether that is enabled, or disabled) for any form rebuilds after the initial form build.

Material documentation states (I am using quotation marks around the elements here):

As with any standard "input element", it is possible to disable the datepicker input by adding the disabled property. By default, the "mat-datepicker" and "mat-datepicker-toggle" will inherit their disabled state from the "input element"

So, setting the disabled/ enabled state of the mat-datepicker-toggle after rebuilding the form is the problem I am trying to solve.

I have simplified, but working, code below to show what I have tried most recently. Let me know if there is more information you require.

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { MatDatepickerModule, MatIconModule,
  MatInputModule, MatNativeDateModule,} from '@angular/material';

@NgModule({
  exports: [ MatDatepickerModule, MatIconModule,
    MatInputModule, MatNativeDateModule ]
})
export class MaterialModule { }

@NgModule({
  imports:      [ BrowserModule, FormsModule, ReactiveFormsModule, 
MaterialModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ],
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { VERSION } from '@angular/material';

@Component({
  selector: 'material-app',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  formGroup: FormGroup;
  version = VERSION;
  disableMe = false;
  infamousDate = "2018-08-22T12:34:56.789Z";

  constructor() { }

  ngOnInit() {
    this.rebuildForm();
  }
  rebuildForm() {
    this.disableMe = !this.disableMe;
    this.formGroup = new FormGroup({
      dateJoined: new FormControl(
        { disabled: this.disableMe, value: this.infamousDate })
    });
  }
}

app.component.html

<form class="basic-container" [formGroup]="formGroup">
  <mat-form-field>
    <input matInput [matDatepicker]="dateJoined" placeholder="Date joined" formControlName="dateJoined">
    <mat-datepicker #dateJoined></mat-datepicker>
    <mat-datepicker-toggle matSuffix [for]="dateJoined"></mat-datepicker-toggle>
  </mat-form-field>
</form>
<button (click)="rebuildForm()">click me</button><hr><span>date enabled: {{!disableMe}}</span>

Here is the same code in a Stackblitz.

Upvotes: 2

Views: 7674

Answers (1)

G. Tranter
G. Tranter

Reputation: 17918

You need to bind the disabled input of the mat-datepicker-toggle to the form control's disabled property:

<mat-datepicker-toggle matSuffix [for]="dateJoined"
    [disabled]="formGroup.controls['dateJoined'].disabled">
</mat-datepicker-toggle>

Upvotes: 5

Related Questions