Hi, My today's challenge is to create simple login form, like you can see in almost every web application.
Well, we will use plunker project already created for
previous post since it has view called "login".
Lets also add css styles of
bootstrap library to the project for take advantage of this awesome framework with its form and validtaion styles.
Step 1 - ngModel
Yes, the famous two way data binding is still here. Only now it is using "[(" syntax:
<form (ngSubmit)="login()">
<div class="form-group">
<label for="email">Email</label>
<input type="text" class="form-control"
[(ngModel)]="email"
>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control"
[(ngModel)]="password"
>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
lets put simple code of component which only checks the input value is bound correctly:
export class Login {
public email: string;
public password: string;
constructor(public router: Router){}
login(){
if(this.email && this.password){
alert(this.email+' '+this.password)
}
}
}
Now when some characters filled into both inputs you can see it in alert after clicking submit.
Step 2 - ngForm
It is good practice to use "ngForm" directive which holds the status of form and its controls:
The status can be valid (or "invalid"),pristine(or dirty) and touched
By using reference (attribute decorated with "#") and "hidden" directive i can show validation error labels.
<div class="container">
<form (ngSubmit)="login()">
<div class="form-group">
<label for="email">Email</label>
<input type="text" class="form-control" required
[(ngModel)]="email" ngControl="emailctrl" #emailctrl="ngForm"
>
<div [hidden]="emailctrl.valid || emailctrl.pristine" class="alert alert-danger">
Email is required
</div>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" required
[(ngModel)]="password" ngControl="passctrl" #passctrl="ngForm"
>
<div [hidden]="passctrl.valid || passctrl.pristine" class="alert alert-danger">
Passwd is required
</div>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
From now - if you typing something in one of the controls and then deleting it - the validation messages
displayed.
Here is running code:
Hope you have fun reading...
