Doesn't trigger validity checks on forms

[swargoletCts]

I realize this is still in development, but I found this while trying to create my own keyboard for Angular2 and it is much more powerful than mine although has the same main issue as mine. When using the keyboard with forms, it doesnt run the update/validation functions to change field/form state from invalid to valid.

I'm thinking that updateValueAndValidity() has to be called on the form controls but can't seem to find a place to do that within the code base.

I've also tried triggering a key event within the element itself using Renderer.invokeElementMethod instead of updating the value directly like the keyboard-key component is doing but although I see the event triggering on the element, it doesnt seem to do anything more. I'm thinking maybe it is because 'isTrusted' is false on the event.

Have you experienced this issue or found a way around it in your development?

[swargoletCts]

Ended up finding a solution for this. Instead of using elementRef to manipulate the value directly, I instead modified it to utilize NgControl and setValue on the control itself. Within the SetValue function it automatically calls the updateValueAndValidity() on the control which fixes the issue. I'm not sure if doing it this way opens up more issues though.

Here are the changes I made. keyboard.directive.ts

  import { NgControl } from "@angular/forms";
   ...
  private _showKeyboard() {
    ...
    this._keyboardRef.instance.setControl(this.control);
  }
  constructor(private _elementRef: ElementRef,
              private _keyboardService: MdKeyboardService,
              private control : NgControl) {
  }

keyboard.component.ts

  private _control$: AsyncSubject<any> = new AsyncSubject();
  get control(): Observable<any> {
    return this._control$.asObservable();
  }

  setControl(control) {
    this._control$.next(control);
    this._control$.complete();
  }

keyboard.component.html

...
      <md-keyboard-key
        class="mat-keyboard__col"
        *ngIf="key[modifier]"
        [key]="key[modifier]"
        [active]="isActive(key[modifier])"
        [input]="inputInstance | async"
        [control]="control | async"    <--------------------
        (altClick)="onAltClick()"
        (capsClick)="onCapsClick()"
        (shiftClick)="onShiftClick()"
      ></md-keyboard-key>
...

keyboard-key.component.ts

import { NgControl } from '@angular/forms';
...
  @Input() control?: NgControl;
...

      case 'Bksp':
        // this.input.nativeElement.value = [value.slice(0, caret - 1), value.slice(caret)].join(''); // No longer needed
        this.control.control.setValue([value.slice(0, caret - 1), value.slice(caret)].join(''))
        this._setCursorPosition(caret - 1);
        break;
...
    if (char && this.input) {
      // this.input.nativeElement.value = [value.slice(0, caret), char, value.slice(caret)].join('');  // No longer needed
        this.control.control.setValue([value.slice(0, caret), char, value.slice(caret)].join(''))
        this._setCursorPosition(caret + 1);
    }

[davidenke]

@swargoletCts This is interessting. Have you considered using the ngModel instead, do you have any experiences with it? Would you mind to pr your changes?

[davidenke]

Fixed by #11

[swargoletCts]

I completely missed your comment from Jul. Sorry about that! Glad to see someone else jumping in to fix it.

[davidenke]

@swargoletCts I have to admit that it hasn't been fixed completly. I'm still working on it :)