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 5981758416
commit ffae8cd248
10 changed files with 47 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

4
package.json
View file

@ -36,8 +36,8 @@
"leaflet": "^0.7.7",
"leaflet-map": "^0.2.1",
"lodash": "^4.12.0",
"ng2-bootstrap": "^1.0.16",
"ng2-ckeditor": "^1.0.3",
"ng2-bootstrap": "^1.0.17",
"ng2-ckeditor": "^1.0.4",
"ng2-uploader": "^0.5.2",
"normalize.css": "^4.1.1",
"rxjs": "5.0.0-beta.6",

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 {
};
}
}
}
}

5
src/platform/browser/directives.ts
View file

@ -6,10 +6,13 @@ import {PLATFORM_DIRECTIVES} from '@angular/core';
// Angular 2 Router
import {ROUTER_DIRECTIVES} from '@angular/router-deprecated';
// Angular 2 forms
import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms';
// application_directives: directives that are global through out the application
export const APPLICATION_DIRECTIVES = [
...ROUTER_DIRECTIVES
...ROUTER_DIRECTIVES,
...REACTIVE_FORM_DIRECTIVES
];
export const DIRECTIVES = [

15
src/platform/browser/providers.ts
View file

@ -10,15 +10,20 @@ import {HTTP_PROVIDERS} from '@angular/http';
// Angular 2 Router
import {ROUTER_PROVIDERS} from '@angular/router-deprecated';
// Angular 2 forms
import {disableDeprecatedForms, provideForms} from '@angular/forms';
/*
* Application Providers/Directives/Pipes
* providers/directives/pipes that only live in our browser environment
*/
* Application Providers/Directives/Pipes
* providers/directives/pipes that only live in our browser environment
*/
export const APPLICATION_PROVIDERS = [
...FORM_PROVIDERS,
// new Angular 2 forms
disableDeprecatedForms(),
provideForms(),
...HTTP_PROVIDERS,
...ROUTER_PROVIDERS,
{provide: LocationStrategy, useClass: HashLocationStrategy }
{provide: LocationStrategy, useClass: HashLocationStrategy}
];
export const PROVIDERS = [