Getting errorCannot read property 'value' of undefined at \ngx-material-keyboard-core.js.MatKeyboardKeyComponent._setCursorPosition

[Nsisodia91]

No description provided.

[Nsisodia91]

I'm trying to integrate dark theme keyboard for which I've prepared following code

 openKeyboard(obj: HTMLInputElement) {
    console.log(obj.name);
    this._keyboardRef = this._keyboardService.open(this.locale, {
        darkTheme: this.darkTheme
    });

    const elem = obj.name == "username" ? this._usernameElement : this._passwordElement;

    // reference the input element
    this._keyboardRef.instance.setInputInstance(elem);
}

And within my view part I've implemented below code

<div class="username-container">
    <p for="username" class="username">Username</p>
    <input type="text" id="username"  #username on-focus="openKeyboard(username)" on-focusout="closeKeyboard()" name="username" class="rectangle-input" required formControlName="username" />
</div>
<div class="password-container">
    <p for="password" class="password">Password</p>
    <input type="password" id="password" #password class="rectangle-input" on-focus="openKeyboard(password)" on-focusout="closeKeyboard()" name="password" required formControlName="password"/>         
</div>

But the issue over here is when I select any value from keyboard it throws me following error

Cannot read property 'value' of undefined at \ngx-material-keyboard-core.js.MatKeyboardKeyComponent._setCursorPosition

Why its been throwing this error

[Femina]

Any update on this? I am facing same issue

[CPMikeAmato]

Anything on this? Facing the same issue.

[bryanweaver]

Also having this issue

[bryanweaver]

Ok, I figured something out. The MatKeyboardKeyComponent is expecting your input to be a FormControl.

your_component.ts:
private data = '';
testControlValue = new FormControl({value: this.data, disabled: false});

your_component.html:
<input type="text" [formControl]="testControlValue" [matKeyboard] [darkTheme]="true" />

[teja0533]

Thanks @bryanweaver that helped me