Disable datepicker


Topic: Disable datepicker

tano pro asked 6 years ago

Actual behavior In case I want to set disable state I got an exception Cannot read property 'nativeElement' of undefined. I've found the cause. There's an ngIf='!inline' which cause that the dateInput is not initialized correctly, so you should use viewchildren instead of viewchild or [hidden] instead of ngif

Thanks


Arkadiusz Idzikowski staff answered 6 years ago

Hello,

How can we reproduce this problem? How do you add the disabled state to the date picker component?


tano pro commented 6 years ago

Hi,

Simply set disabled during declaration new FormControl({ value, disabled }, question.validators) or in ngAfterViewInit.


Damian Gemza staff answered 6 years ago

Dear @tano

Please attach the code which you're using, and causes you problems - We don't know if you're using the Datepicker disabled property, or native element disabled.

Best Regards,

Damian


tano pro answered 6 years ago

I use reactive form, nothing special:

 <mdb-date-picker mdbValidate formControlName="date"></mdb-date-picker>

ts:

new FormControl({ value, disabled:true })

The exception is thrown from MDBDatePickerComponent setDisabledState method since the this.dateInput is undefined what is reasonable. The template:

<div class="mydp picker" [ngClass]="{'picker--opened': showSelector}" [ngStyle]="{'width': opts.width}" *ngIf="!inline">

you can't use @ViewChild('dateInput') dateInput: ElementRef; because of the *ngIf="!inline". You should use ViewChildren which is initialized in afterviewinited phrase. or use setter

@ViewChild('dateInput')
set dateInputField(value){ 
    this.dateInput = value; 
}

Damian Gemza staff answered 6 years ago

Okay, now I see this. Thanks for your report!

We'll resolve this problem soon.

Best Regards,

Damian


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.5.0
  • Device: PC
  • Browser: Chrome
  • OS: Win10
  • Provided sample code: No
  • Provided link: No
Tags