Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-31 14:48:49 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(login): add angular 2 form logic

Browse source
This commit is contained in:
nixa 2016-06-16 12:11:28 +03:00
parent 919cbf5d2d
commit 2ba18109cd
2 changed files with 28 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

24
src/app/pages/login/login.component.ts
View file

@ -1,5 +1,5 @@
import {Component, ViewEncapsulation} from '@angular/core';
import {FORM_DIRECTIVES, FormBuilder, ControlGroup, Validators, AbstractControl} from '@angular/common';
@Component({
selector: 'login',
@ -10,9 +10,27 @@ import {Component, ViewEncapsulation} from '@angular/core';
})
export class Login {
constructor() {
public form:ControlGroup;
public email:AbstractControl;
public password:AbstractControl;
public submitted:boolean = false;
constructor(fb:FormBuilder) {
this.form = fb.group({
'email': ['', Validators.compose([Validators.required, Validators.minLength(4)])],
'password': ['', Validators.compose([Validators.required, Validators.minLength(4)])]
});
this.email = this.form.controls['email'];
this.password = this.form.controls['password'];
}
ngOnInit() {
public onSubmit(values:Object):void {
this.submitted = true;
if (this.form.valid) {
// your code goes here
// console.log(values);
}
}
}

14
src/app/pages/login/login.html
View file

@ -1,26 +1,26 @@
<div class="auth-main">
<div class="auth-block">
<h1>Sign in to Blur Admin</h1>
<h1>Sign in to ng2-admin</h1>
<a [routerLink]="['Register']" class="auth-link">New to ng2-admin? Sign up!</a>
<form class="form-horizontal">
<div class="form-group row">
<form [ngFormModel]="form" (ngSubmit)="onSubmit(form.value)" class="form-horizontal">
<div class="form-group row" [ngClass]="{'has-error': (!email.valid && email.touched), 'has-success': (email.valid && email.touched)}">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
<input [ngFormControl]="email" type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group row">
<div class="form-group row" [ngClass]="{'has-error': (!password.valid && password.touched), 'has-success': (password.valid && password.touched)}">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
<input [ngFormControl]="password" type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default btn-auth">Sign in</button>
<button [disabled]="!form.valid" type="submit" class="btn btn-default btn-auth">Sign in</button>
<a [routerLink]="['Login']" class="forgot-pass">Forgot password?</a>
</div>
</div>