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

feat(forms): update forms to latest version

Browse source
This commit is contained in:
nixa 2016-07-08 13:10:36 +03:00
parent 4dfd7e8c28
commit 44924aefcc
7 changed files with 31 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/app/pages/editors/components/ckeditor/ckeditor.component.ts
View file

@ -1,6 +1,6 @@
import {Component} from '@angular/core';
import {CKEditor} from 'ng2-ckeditor';
import {BaCard} from "../../../../theme/components/baCard/baCard.component";
import {BaCard} from '../../../../theme/components/baCard';
import './ckeditor.loader.ts';
@ -11,11 +11,12 @@ import './ckeditor.loader.ts';
})
export class Ckeditor {
private ckeditorContent;
private config;
public ckeditorContent:string = '<p>Hello CKEditor</p>';
public config = {
uiColor: '#F0F3F4',
height: '600'
};
constructor() {
this.ckeditorContent = `<p>Hello CKEditor</p>`;
this.config = {uiColor: '#F0F3F4', height: '600'};
}
}

6
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';
import {FormGroup, AbstractControl, FormBuilder, Validators} from '@angular/forms';
@Component({
selector: 'login',
@ -10,7 +10,7 @@ import {FORM_DIRECTIVES, FormBuilder, ControlGroup, Validators, AbstractControl}
})
export class Login {
public form:ControlGroup;
public form:FormGroup;
public email:AbstractControl;
public password:AbstractControl;
public submitted:boolean = false;
@ -24,7 +24,7 @@ export class Login {
this.email = this.form.controls['email'];
this.password = this.form.controls['password'];
}
public onSubmit(values:Object):void {
this.submitted = true;
if (this.form.valid) {

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

@ -3,19 +3,19 @@
<h1>Sign in to ng2-admin</h1>
<a [routerLink]="['/register']" class="auth-link">New to ng2-admin? Sign up!</a>
<form [ngFormModel]="form" (ngSubmit)="onSubmit(form.value)" class="form-horizontal">
<form [formGroup]="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 [ngFormControl]="email" type="email" class="form-control" id="inputEmail3" placeholder="Email">
<input [formControl]="email" type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<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 [ngFormControl]="password" type="password" class="form-control" id="inputPassword3" placeholder="Password">
<input [formControl]="password" type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group row">

8
src/app/pages/register/register.component.ts
View file

@ -1,5 +1,5 @@
import {Component, ViewEncapsulation} from '@angular/core';
import {FORM_DIRECTIVES, FormBuilder, ControlGroup, Validators, AbstractControl} from '@angular/common';
import {FormGroup, AbstractControl, FormBuilder, Validators} from '@angular/forms';
import {EmailValidator, EqualPasswordsValidator} from '../../theme/validators';
@Component({
@ -11,12 +11,12 @@ import {EmailValidator, EqualPasswordsValidator} from '../../theme/validators';
})
export class Register {
public form:ControlGroup;
public form:FormGroup;
public name:AbstractControl;
public email:AbstractControl;
public password:AbstractControl;
public repeatPassword:AbstractControl;
public passwords:ControlGroup;
public passwords:FormGroup;
public submitted:boolean = false;
@ -33,7 +33,7 @@ export class Register {
this.name = this.form.controls['name'];
this.email = this.form.controls['email'];
this.passwords = <ControlGroup> this.form.controls['passwords'];
this.passwords = <FormGroup> this.form.controls['passwords'];
this.password = this.passwords.controls['password'];
this.repeatPassword = this.passwords.controls['repeatPassword'];
}

10
src/app/pages/register/register.html
View file

@ -3,33 +3,33 @@
<h1>Sign up to ng2-admin</h1>
<a [routerLink]="['/login']" class="auth-link">Already have an ng2-admin account? Sign in!</a>
<form [ngFormModel]="form" (ngSubmit)="onSubmit(form.value)" class="form-horizontal">
<form [formGroup]="form" (ngSubmit)="onSubmit(form.value)" class="form-horizontal">
<div class="form-group row" [ngClass]="{'has-error': (!name.valid && name.touched), 'has-success': (name.valid && name.touched)}">
<label for="inputName3" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input [ngFormControl]="name" type="text" class="form-control" id="inputName3" placeholder="Full Name">
<input [formControl]="name" type="text" class="form-control" id="inputName3" placeholder="Full Name">
</div>
</div>
<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 [ngFormControl]="email" type="email" class="form-control" id="inputEmail3" placeholder="Email">
<input [formControl]="email" type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<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 [ngFormControl]="password" type="password" class="form-control" id="inputPassword3" placeholder="Password">
<input [formControl]="password" type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group row" [ngClass]="{'has-error': (!repeatPassword.valid && repeatPassword.touched), 'has-success': (repeatPassword.valid && repeatPassword.touched)}">
<label for="inputPassword4" class="col-sm-2 control-label">Repeat</label>
<div class="col-sm-10">
<input [ngFormControl]="repeatPassword" type="password" class="form-control" id="inputPassword4" placeholder="Repeat">
<input [formControl]="repeatPassword" type="password" class="form-control" id="inputPassword4" placeholder="Repeat">
<span *ngIf="!passwords.valid && (password.touched || repeatPassword.touched)" class="help-block sub-little-text">Passwords don't match.</span>
</div>
</div>

8
src/app/theme/validators/email.validator.ts
View file

@ -1,14 +1,14 @@
import {Control} from '@angular/common';
import {AbstractControl} from '@angular/forms';
export class EmailValidator {
public static validate(c: Control) {
public static validate(c:AbstractControl) {
let EMAIL_REGEXP = /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i;
return EMAIL_REGEXP.test(c.value) ? null : {
validateEmail: {
valid: false
}
};
}
}
}

10
src/app/theme/validators/equalPasswords.validator.ts
View file

@ -1,11 +1,11 @@
import {Control, ControlGroup} from '@angular/common';
import {FormGroup} from '@angular/forms';
export class EqualPasswordsValidator {
public static validate(firstField, secondField) {
return (c: ControlGroup) => {
return (c:FormGroup) => {
return (c.controls && c.controls[firstField].value == c.controls[secondField].value) ? null : {
passwordsEqual: {
valid: false
@ -13,4 +13,4 @@ export class EqualPasswordsValidator {
};
}
}
}
}