Submit form using on screen keyboard

Question

I am trying to submit a form using an on screen keyboard but am not sure how to go about this. Essentially I need be able to see the characters that I click on in the on screen keyboard when I click the submit button on my form.

I have a directive that has the methods I use for listing the events like onFocus onBlur. I have a component that lists the different key and mouse events like keyPressed _enterPressed etc.

Here is my code and a stackblitz link below

service.ts

private _enterPressed: Subject<void>;

get enterPressed() {
  return this._enterPressed;
}

fireEnterPressed() {
  this._enterPressed.next();
}

directive

private onEnter() {
  let element = this.el.nativeElement;
  let inputEl = element.querySelector('input');
  alert("Enter"+ inputEl.value);
}

app component.ts

submit() {
  //submit forms
  alert('submit');
}

Here is a stackblitz example of the code https://stackblitz.com/edit/onscreen-keyboard-5uxhyo?file=src%2Fapp%2Fapp.component.ts

When I use the on screen keyboard to input characters into the input fields, and then I click the submit button I do not see the characters that I have entered however if I type normally on my computers keyboard and click submit then i can see the values alerted.

Any idea how I can fix this?

Answer 1

Your keyboard only change the "element.value".

You can inject the "NgControl" in your osk-input.directive

constructor(@Optional()private control:NgControl,
            private el: ElementRef, private keyboard: KeyboardService) {}

And in your functions onKey and onBackspace add this.control.control.setValue(...)

  private onKey(key: string) {
    let element = this.el.nativeElement,start = element.selectionStart,end = element.selectionEnd;

    this.measure.textContent = element.value.substr(0, start) + key;
    element.value =
      element.value.substr(0, start) + key + element.value.substr(end);

    //<--add this lines--//
    if (this.control)
       this.control.control.setValue(element.value) 
    ...
  }

  private onBackspace() {
    let element = this.el.nativeElement,start = element.selectionStart,end = element.selectionEnd;
    ...
    this.measure.textContent = element.value.substr(0, start);
    element.value = element.value.substr(0, start) + element.value.substr(end);

    //<--add this lines--//
    if (this.control)
       this.control.control.setValue(element.value) 
    ...
  }

BTW. Your onEnterFunction should be some like

  private onEnter() {
    const ev = new KeyboardEvent('keydown',{code:"Enter",key: "Enter",
    keyCode: 13})
    this.el.nativeElement.dispatchEvent(ev)
  }

So, you can use in your .html like

<form [formGroup]="setupForm">
  <input appOskInput formControlName="email" 
        (keydown.enter)="mobile.focus()" />
  <input #mobile appOskInput formControlName="mobile" 
        (keydown.enter)="button.focus()" />
  <button #button type="button" (click)="submit()">Submit</button>
</form>

Your forked stackblitz