Login.html
=======================
<ion-content padding class="">
<ion-list>
<form #signinForm="ngForm" [ngFormModel]="loginForm" novalidate>
<ion-item>
<ion-label floating primary>Username</ion-label>
<ion-input [(ngModel)]="signup.username" ngControl="username" type="text" #username="ngForm" required>
</ion-input>
</ion-item>
<p [hidden]="username.valid || submitted == false" danger padding-left>
Username is required
</p>
<ion-item>
<ion-label floating primary>Password</ion-label>
<ion-input [(ngModel)]="signup.password" ngControl="password" type="password" #password="ngForm" required>
</ion-input>
</ion-item>
<p [hidden]="password.valid || submitted == false" danger padding-left>
Password is required
</p>
<div padding>
<button (click)="onSignin(signupForm)" type="submit" primary >Sign In</button>
<p style="color:red; text-align:center">{{error}}</p>
</div>
</form>
</ion-list>
</ion-content>
Login.ts
==================
import 'rxjs/add/operator/map';
import {Observable} from 'rxjs/Observable';
import {Injectable} from '@angular/core';
import {Http, Response, Headers, RequestOptions} from '@angular/http';
import { Page, NavController,Loading } from 'ionic-angular';
import { Component } from '@angular/core';
import { FORM_DIRECTIVES, FormBuilder,Control, ControlGroup, Validators, AbstractControl } from '@angular/common';
import {home} from '../home/home';
@Component({
templateUrl: 'build/pages/login/login.html',
directives: [FORM_DIRECTIVES]
})
@Injectable()
export class login {
signup: {username?: string, password?: string} = {};
submitted = false;
handleError:any;
error:any;
loginForm: ControlGroup;
constructor(private nav: NavController,private http:Http, builder: FormBuilder) {
this.nav = nav;
this.loginForm = builder.group({
'username': [
'',
Validators.compose([Validators.required])
],
'password': [
'',
Validators.compose([Validators.required])
]
});
}
onSignin(signupForm)
{
this.submitted = true;
if (this.loginForm.valid) {
alert("valid");
}
else
{
alert("Not valid");
}
}
}
=======================
<ion-content padding class="">
<ion-list>
<form #signinForm="ngForm" [ngFormModel]="loginForm" novalidate>
<ion-item>
<ion-label floating primary>Username</ion-label>
<ion-input [(ngModel)]="signup.username" ngControl="username" type="text" #username="ngForm" required>
</ion-input>
</ion-item>
<p [hidden]="username.valid || submitted == false" danger padding-left>
Username is required
</p>
<ion-item>
<ion-label floating primary>Password</ion-label>
<ion-input [(ngModel)]="signup.password" ngControl="password" type="password" #password="ngForm" required>
</ion-input>
</ion-item>
<p [hidden]="password.valid || submitted == false" danger padding-left>
Password is required
</p>
<div padding>
<button (click)="onSignin(signupForm)" type="submit" primary >Sign In</button>
<p style="color:red; text-align:center">{{error}}</p>
</div>
</form>
</ion-list>
</ion-content>
Login.ts
==================
import 'rxjs/add/operator/map';
import {Observable} from 'rxjs/Observable';
import {Injectable} from '@angular/core';
import {Http, Response, Headers, RequestOptions} from '@angular/http';
import { Page, NavController,Loading } from 'ionic-angular';
import { Component } from '@angular/core';
import { FORM_DIRECTIVES, FormBuilder,Control, ControlGroup, Validators, AbstractControl } from '@angular/common';
import {home} from '../home/home';
@Component({
templateUrl: 'build/pages/login/login.html',
directives: [FORM_DIRECTIVES]
})
@Injectable()
export class login {
signup: {username?: string, password?: string} = {};
submitted = false;
handleError:any;
error:any;
loginForm: ControlGroup;
constructor(private nav: NavController,private http:Http, builder: FormBuilder) {
this.nav = nav;
this.loginForm = builder.group({
'username': [
'',
Validators.compose([Validators.required])
],
'password': [
'',
Validators.compose([Validators.required])
]
});
}
onSignin(signupForm)
{
this.submitted = true;
if (this.loginForm.valid) {
alert("valid");
}
else
{
alert("Not valid");
}
}
}