Closed
Description
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.