update

app/app.css

@@ -22,6 +22,10 @@ refer to http://docs.nativescript.org/ui/theme.
   background-color:#ffffff;
 }
 
+.input-error {
+  border-color: red;
+  border-width: 1;
+}
 
 .form {
   background-color: teal;

app/app.module.ts

@@ -1,3 +1,4 @@
+import { BookComponent } from './components/book/book.component';
 import { ValidatorComponent } from './components/validator/validator.component';
 import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
 import { NativeScriptModule } from "nativescript-angular/nativescript.module";
@@ -19,7 +20,8 @@ import { HomeComponent } from './components/home/home.component';
     declarations: [
         AppComponent,
         HomeComponent,
-        ValidatorComponent
+        ValidatorComponent,
+        BookComponent
     ],
     providers: [
 

app/app.routing.ts

@@ -2,10 +2,12 @@ import { HomeComponent } from './components/home/home.component';
 import { NgModule } from "@angular/core";
 import { NativeScriptRouterModule } from "nativescript-angular/router";
 import { Routes } from "@angular/router";
+import { BookComponent } from './components/book/book.component';
 
 const routes: Routes = [
     { path: "", redirectTo: "/home", pathMatch: "full" },
     { path: "home", component: HomeComponent },
+    { path: "book-edit", component: BookComponent },
 ];
 
 @NgModule({

app/components/book/book.component.html

@@ -0,0 +1,17 @@
+<ActionBar title="Book" icon="" class="action-bar">
+</ActionBar>
+<StackLayout class="form">
+   <StackLayout class="input-field" >
+      <StackLayout orientation="vertical" class="form-book">
+         <TextField [(ngModel)]="model.name" hint="name" class="input-active" ></TextField>
+         <validator property="name" [listErrors]="listErrors"></validator>
+         <TextField [(ngModel)]="model.author" hint="author"  class="input-active" secure="true"></TextField>
+         <validator property="author"  [listErrors]="listErrors"></validator>
+         <TextField [(ngModel)]="model.pages" hint="pages"  class="input-active" secure="true"></TextField>
+         <validator property="pages"  [listErrors]="listErrors"></validator>
+         <Button text="Save" (tap)="validate()" class="btn-simple"></Button>
+      </StackLayout>
+   </StackLayout>
+</StackLayout>
+
+

app/components/book/book.component.ts

@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+import { Book } from '../../model/book';
+import { ValidationError, validate } from 'class-validator';
+import { BasicComponent } from '../shared/basic-component';
+import { Login } from '../../model/login';
+var dialogs = require("ui/dialogs");
+
+@Component({
+	moduleId: module.id,
+	selector: 'book',
+	templateUrl: './book.component.html'
+})
+
+export class BookComponent extends BasicComponent<Book> {
+
+	constructor() {
+		super(new Book());
+	}
+
+	afterValidate() {
+		super.message("Save OK");
+	}
+
+}

app/components/home/home.component.html

@@ -3,11 +3,11 @@
 <StackLayout class="form">
    <StackLayout class="input-field" >
       <StackLayout orientation="vertical" class="form-login">
-         <TextField [(ngModel)]="login.email" hint="email" class="input-active"></TextField>
+         <TextField [(ngModel)]="model.email" hint="email" class="input-active"></TextField>
          <validator property="email" [listErrors]="listErrors"></validator>
-         <TextField [(ngModel)]="login.password" hint="password"  class="input-active" secure="true"></TextField>
+         <TextField [(ngModel)]="model.password" hint="password"  class="input-active" secure="true"></TextField>
          <validator property="password"  [listErrors]="listErrors"></validator>
-         <Button text="LOGIN" (tap)="validLogin()" class="btn-simple"></Button>
+         <Button text="LOGIN" (tap)="validate()" class="btn-simple"></Button>
       </StackLayout>
    </StackLayout>
 </StackLayout>

app/components/home/home.component.ts

@@ -1,6 +1,8 @@
 import { Login } from './../../model/login';
 import { Component, OnInit } from '@angular/core';
 import { validate, ValidationError } from 'class-validator';
+import { RouterExtensions } from "nativescript-angular";
+import { BasicComponent } from '../shared/basic-component';
 var dialogs = require("ui/dialogs");
 
 @Component({
@@ -9,37 +11,14 @@ var dialogs = require("ui/dialogs");
 	templateUrl: './home.component.html'
 })
 
-export class HomeComponent implements OnInit {
+export class HomeComponent extends BasicComponent<Login> {
 
-	login: Login;
 
-	listErrors: Array<ValidationError> = [];
-
-	constructor() {
-		this.login = new Login();
-	}
-
-	ngOnInit() { }
-
-	validLogin() {
-		try {
-			validate(this.login).then(errors => {
-				if (errors.length > 0) {
-					this.listErrors = errors;
-				} else {
-					this.listErrors = [];
-					this.messageLoginOk();
-				}
-			});
-		} catch (e) {
-			console.log(e);
-		}
+	constructor(private routerExtensions: RouterExtensions) {
+		super(new Login());
 	}
 
-	messageLoginOk() {
-		dialogs.alert("Login sucess").then(function () {
-			console.log("Login sucess");
-		});
-
-	}
+	afterValidate() {
+		this.routerExtensions.navigate(["book-edit"], { animated: false });
+   }
 }

app/components/shared/basic-component.ts

@@ -0,0 +1,42 @@
+import { ValidationError, validate } from 'class-validator';
+import { OnInit } from '@angular/core';
+var dialogs = require("ui/dialogs");
+import { BasicModel} from "../../model/basic-model";
+
+
+export abstract class BasicComponent<T extends BasicModel> {
+
+   model: T;
+
+   listErrors: Array<ValidationError> = [];
+
+	constructor(arg: T) {
+      this.model = arg;
+	}
+
+	validate() {
+		try {
+			validate(this.model).then(errors => {
+				if (errors.length > 0) {
+					this.listErrors = errors;
+				} else {
+					this.listErrors = [];
+               this.afterValidate();
+				}
+			});
+		} catch (e) {
+			console.log(e);
+		}
+	}
+
+   afterValidate() {
+
+   }
+
+	message(message: string) {
+		dialogs.alert(message).then(function () {
+			console.log(message);
+		});
+
+	}
+}

app/model/basic-model.ts

@@ -0,0 +1,3 @@
+export abstract class BasicModel {
+
+}

app/model/book.ts

@@ -0,0 +1,15 @@
+import { ValidateIf, IsNotEmpty, IsEmail, IsEmailOptions, ValidateNested } from "class-validator";
+import { BasicModel} from "./basic-model";
+
+export class Book extends BasicModel {
+
+   @IsNotEmpty({message:"Name is required"})
+   name: string;
+
+   @IsNotEmpty({message:"Author is required"})
+   author: string;
+
+   @IsNotEmpty({message:"Pages is required"})
+   pages: string;
+
+}

app/model/login.ts

@@ -1,6 +1,7 @@
 import { ValidateIf, IsNotEmpty, IsEmail, IsEmailOptions, ValidateNested } from "class-validator";
+import { BasicModel} from "./basic-model";
 
-export class Login {
+export class Login extends BasicModel  {
 
    @IsEmail(undefined, {message:"Email invalid"})
    @IsNotEmpty({message:"Email is required"})