0

I'm trying to make a reusable component which implements the Simple-Keyboard module, which is a customisable onscreen touch keyboard.

I then want to call it on various pages of my application which has form inputs.

There are lots of single page examples of this and I have also successfully made a multiple input example which my demo is based on.

I've managed to call the keyboard from my form successfully and I can see in the console that the name of the field is picked up and the key inputs registered. However I'm unable to get the two-way binding required to return the value in the chosen field.

Here is my Stackblitz code:

Angular Multiple Form Reusable Touch Keyboard

I've tried a number of ways to hook up the two-way binding, without success. I was trying to base it on various examples using the @Input / @Output property bindings, with no luck.

Could someone help?

nbren007
  • 313
  • 1
  • 4
  • 14
  • You mean two way binfing, like getting the `app-keyboard` values directly from a variable?? (Ex. `"`) for that, you'll have to implement [`ControlValueAccessor`](https://angular.io/api/forms/ControlValueAccessor) – luiscla27 May 28 '22 at 00:59
  • Your code is a mess, I tried to implement `ControlValueAccessor` in your stackblitz example and there it was just way too many bad practices and errors around that I gave up. Good luck – luiscla27 May 28 '22 at 05:20
  • As general suggestions: (1) Unless is completely needed, create your component functions without arrows (`=>`). (2) When creating generic components, initialize them completely when used to prevent bugs for sharing unwanted attribute values on each call (3) Destroy your dynamic component DOM when not used (4) DO NOT share logic from your parent component to your child component, child components must "survive" by their own, currently `app-keyboard` depends on its parent to work as there's logic in the component caller, you should only parametrize a list of the available `inputs` ans that's it. – luiscla27 May 28 '22 at 05:31
  • Youre outputting an eventemitter, but you should create it in the setup and throw it to keyboard component as input. Then in setup you subscribe to the eventemitter and in keyboard you emit to it. – DFSFOT Jun 02 '22 at 14:45

1 Answers1

1

Simple keyboard is a pure javascript lib. Here the input is sent/generated outside angular scope, angular doesn't know what/when to refresh

To do what you need, you should pass to you keyboard module a Subject and the same subject you link it to a dynamic form: https://angular.io/guide/dynamic-form

I'll implement it later this week end if this explaination is not enought

FHocs
  • 11
  • 2
  • I think this might be what is implemented in this example using a different Keyboard, is this what you are alluding to? https://stackblitz.com/edit/onscreen-keyboard?file=src%2Fapp%2Fapp.component.html If you would like to do a Simple-Keyboard example as you've suggested, I'd love to see it as I've not managed to make the progress I'd hoped to have done on it. – nbren007 Jun 08 '22 at 15:21