Nativescript-angular: How to do Validations In nativescript angular2 app

[sarvagayatri]

PSST! Want to get faster responses to bug reports and important issues? Help us keep the issue tracker organized by:

• Reporting bugs. Please include all details about the problem and provide a sample app.
• Proposing features and enhancements.
• Discussing implementation details.

Please move all other content to Stack Overflow.

[NickIliev]

@sarvagayatri Here is a basic scenario for validation

_login.component.html_

<GridLayout #formControls rows="auto, auto">
  <TextField #email
    hint="Email Address"
    keyboardType="email"
    [(ngModel)]="user.email"
    row="0"></TextField>
  <TextField #password
    hint="Password"
    secure="true"
    returnKeyType="done"
    (returnPress)="submit()"
    [(ngModel)]="user.password"
    row="1"></TextField>
</GridLayout>

<Button,text="Login"  (tap)="submit()"></Button>

_login.component.ts_

import { Component, ElementRef, OnInit, ViewChild } from "@angular/core";
import { Router } from "@angular/router";
import { View } from "ui/core/view";
import { Page } from "ui/page";

import { User } from "user";

@Component({
  selector: "gr-login",
  templateUrl: "login/login.component.html"
})
export class LoginComponent implements OnInit {
  user: User;
  isLoggingIn = true;
  isAuthenticating = false;

  @ViewChild("formControls") formControls: ElementRef;
  @ViewChild("email") email: ElementRef;
  @ViewChild("password") password: ElementRef;

  constructor(private router: Router,
    private page: Page) {
    this.user = new User();
    this.user.email = "[email protected]";
    this.user.password = "password";
  }

  ngOnInit() {
  }

  submit() {
    if (!this.user.isValidEmail()) {
      alert("Enter a valid email address.");
      return;
    }
  }
}

_user.ts_

export class User {
  email: string;
  password: string;
  isValidEmail() {
       var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
       return re.test(this.email);
  }
}

For full working example you can refer to this sample application

You can also refer to the Angular-2 examples for validation samples

[sarvagayatri]

so we wont be having predefined validation library as we have validations in aurelia/typescript ?

[NickIliev]

Hey @sarvagayatri

I recommend taking a look at Angular-2 Forms.
In the article above a sample validation of forms in Angular-2 is also described.

In the near future, we are also planning on releasing an extended data form control for Angular so you might want to keep track of our nativescrtip-telerik-ui controls.