[ngModel support] Can't read value from textbox which is entered by virtual keyboard.

[bajwa013]

I have created an app and set Keyboard on a input tag (textbox). Entered value in textbox via virtual keyboard, But control's "dirty" property is not set to true and not even able to read data from textbox. Which is visual but can't be accessed via binding. Please if this is not an issue, I need to know what am I making wrong here.

Thanks

[digaus]

Same here an aswell in the demo (form does not contain the text)

also getting this error:

core.d.ts.MatKeyboardKeyComponent.html:2 

ERROR TypeError: Cannot read property 'value' of null
    at MatKeyboardKeyComponent._setCursorPosition (core.es5.js:7449)
    at MatKeyboardKeyComponent.onClick (core.es5.js:7402)
    at Object.eval [as handleEvent] (core.d.ts.MatKeyboardKeyComponent.html:8)
    at handleEvent (core.js:13582)
    at callWithDebugContext (core.js:15091)
    at Object.debugHandleEvent [as handleEvent] (core.js:14678)
    at dispatchEvent (core.js:9995)
    at eval (core.js:10616)
    at HTMLButtonElement.eval (platform-browser.js:2628)
    at ZoneDelegate.invokeTask (zone.js:425)

[digaus]

I forked this and added this._keyboardRef.instance.click.subscribe( input => {this.ngModelChange.next(input);}); to the directive (implemented events on keyboard and keyboard-key for it).

This emits the input directly to the model.

[sukhdeepsingh123]

hey @digaus i can not bind formControl with the keyboard,no change is detected on typing with virtual keyboard and not event attributes of html form like maxlength works.Please help

[digaus]

@sukhdeepsingh123

Try this version: https://github.com/digaus/core

Clone it, run 'npm install' and then 'npm run build'. Then copy content of dist folder to 'node_modules/ngx-material-keyboard/core'

[yanivgo]

hello @digaus i working with angular material autocomplete input, and no change is detected on typing. can you help please?

@sukhdeepsingh123 do you have a solution?

10XXXXXXXXXXXXXXXX

component html: `

<input type="text" placeholder="{{ 'NewSearch' | translate}}" aria-label="Number" matInput [formControl]="searchTerm" [matAutocomplete]="auto"
[matKeyboard] (ngModelChange)="doNameChange($event)" > <mat-autocomplete #auto="matAutocomplete"> <mat-option *ngFor="let item of searchResult" [value]="item" (onSelectionChange)="onSelectionChange(item)"> {{ item }}

`

component ts `private autocompleteObsSubscription: Subscription; searchTypeID : String; searchTerm : FormControl = new FormControl(); searchResult = [];

constructor(private route: ActivatedRoute, private service : GlobalService,private router: Router) {

this.searchTypeID = this.route.snapshot.params['type'];

this.autocompleteObsSubscription = this.searchTerm.valueChanges
    .debounceTime(400)
    .subscribe(data => {
      debugger;
        this.service.getAutocompleteData(data,this.searchTypeID).subscribe(response =>{
            this.searchResult = response
        })
    });

}

doNameChange(event: any){ alert("change") }`

[alkincakiralar1996]

@yanivgo have u found the solution ?

[yanivgo]

@alkincakiralar1996 no :(

[davidenke]

I think the responsible issue is the missing binding of ngControl (ngModel), as already determined by @digaus. Unfortunately, I had to little time for this project. But I hope it'll be better in the next weeks to improve some unsightly passages...

[ypahitas]

Hi @davidenke

I see this issue is closed but from what I understand the issue described by @yanivgo is still outstanding. (keyboard with autocomplete) Did you get a chance to work on it?

[davidenke]

You're right. Unfortunately not yet :( I hope to get my hands on this project again soon...

[ypahitas]

Davidenke, if you know where the problem lies and/or point me in the right direction, i can work on it.