ng-touched never applied

[tjvantoll]

This was reported in a comment on https://www.nativescript.org/blog/requiring-form-fields-with-nativescript-and-angular#comment-3308236632 and I confirmed the behavior in a sample app.

Problem: The ng-touched class name is never applied in NativeScript + Angular apps. As an example try out the following code.

<ActionBar title="Form Tester" class="action-bar"></ActionBar>
<StackLayout class="p-20">
    <Label text="Required Textfield" class="h1 text-center"></Label>
    <TextField required hint="fill this out..." [(ngModel)]="textField" #element></TextField>
    <TextField></TextField>
    <Label [text]="element.className"></Label>
</StackLayout>

import { Component } from "@angular/core";

@Component({
    selector: "ns-items",
    moduleId: module.id,
    templateUrl: "./items.component.html",
})
export class ItemsComponent {
    textField;
}

In this example the label shows all class names associated with the “#element” text field.

Expected behavior: When you blur the first text field, the ng-untouched class name changes to ng-touched. Angular on the web works this way.
Actual behavior: When you blur the first text field the ng-untouched class name remains.

[danielgek]

@tjvantoll i think this is related with the last comments of #526

[vchimev]

nativescript-angular@3.1.0-2017-06-14-1686 and NativeScript/tests-app-ng#24

Errors:

• common - navigating back and forward:

ERROR Error: Uncaught (in promise): Error: Current componentRef is different for cached componentRef
JS: Error: Current componentRef is different for cached componentRef

• checked-value-accessor - works
• date-value-accessor - error with ngModel directive::

ERROR TypeError: Cannot read property 'getDay' of undefined

• number-value-accessor - works
• selectedIndex-value-accessor - does NOT work, NO error
• text-value-accessor - works
• time-value-accessor - does NOT work:

Error fixed by #843:

ERROR TypeError: jit_nodeValue4(...).onTouch is not a function
JS: ERROR CONTEXT [object Object]

Error with ngModel directive:

JS: ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'getHours' of null
JS: TypeError: Cannot read property 'getHours' of null