Skip to content

ng-touched never applied #804

Closed
Closed
@tjvantoll

Description

@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.

Metadata

Metadata

Labels

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions