├── .gitignore ├── LICENSE ├── README.md ├── build └── index.html ├── package.json ├── src └── app │ ├── app.ts │ ├── bootstrap.ts │ └── usernameValidator.ts ├── tsconfig.json └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # node-waf configuration 20 | .lock-wscript 21 | 22 | # Compiled binary addons (http://nodejs.org/api/addons.html) 23 | build/Release 24 | 25 | # Dependency directory 26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 27 | node_modules -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 David 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Angular 2 form validator example 2 | 3 | `npm install` 4 | 5 | `npm run dev` 6 | 7 | http://localhost:8080/ 8 | -------------------------------------------------------------------------------- /build/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular2-form-validation-example", 3 | "version": "1.0.0", 4 | "description": "angular 2 form validation example", 5 | "main": "webpack.config.js", 6 | "dependencies": { 7 | "angular2": "^2.0.0-beta.0", 8 | "es6-promise": "^3.0.2", 9 | "es6-shim": "^0.33.3", 10 | "reflect-metadata": "^0.1.2", 11 | "rxjs": "^5.0.0-beta.0", 12 | "zone.js": "^0.5.10" 13 | }, 14 | "devDependencies": { 15 | "babel-core": "^6.3.26", 16 | "babel-loader": "^6.2.0", 17 | "ntypescript": "^1.201601030604.1", 18 | "ts-loader": "^0.7.2", 19 | "typescript": "^1.7.5", 20 | "webpack": "^1.12.9", 21 | "webpack-dev-server": "^1.14.0" 22 | }, 23 | "scripts": { 24 | "build": "webpack", 25 | "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build" 26 | }, 27 | "keywords": [ 28 | "angular2", 29 | "example", 30 | "app" 31 | ], 32 | "author": "David den Toom", 33 | "license": "ISC" 34 | } 35 | -------------------------------------------------------------------------------- /src/app/app.ts: -------------------------------------------------------------------------------- 1 | import { Component } from 'angular2/core'; 2 | import { 3 | FormBuilder, 4 | Validators, 5 | Control, 6 | ControlGroup, 7 | FORM_DIRECTIVES 8 | } from 'angular2/common'; 9 | 10 | import { UsernameValidator } from './usernameValidator.ts' 11 | 12 | @Component({ 13 | selector: 'my-app', 14 | template: ` 15 | 28 | `, 29 | directives: [FORM_DIRECTIVES] 30 | }) 31 | 32 | class App { 33 | 34 | form: ControlGroup; 35 | 36 | username: Control; 37 | email: Control; 38 | asyncEmail: Control; 39 | 40 | constructor(private builder: FormBuilder) { 41 | 42 | this.username = new Control( 43 | "", 44 | Validators.compose([Validators.required, UsernameValidator.startsWithNumber]), 45 | UsernameValidator.usernameTaken 46 | ); 47 | 48 | this.form = builder.group({ 49 | username: this.username 50 | }); 51 | } 52 | 53 | submitData(){ 54 | console.log(JSON.stringify(this.form.value)) 55 | } 56 | }; 57 | 58 | export default App; 59 | -------------------------------------------------------------------------------- /src/app/bootstrap.ts: -------------------------------------------------------------------------------- 1 | import 'angular2/bundles/angular2-polyfills.js'; 2 | import { bootstrap } from 'angular2/bootstrap'; 3 | 4 | import App from './app.ts'; 5 | 6 | bootstrap(App, []); -------------------------------------------------------------------------------- /src/app/usernameValidator.ts: -------------------------------------------------------------------------------- 1 | import { Control } from "angular2/common"; 2 | 3 | interface ValidationResult{ 4 | [key:string]:boolean; 5 | } 6 | 7 | export class UsernameValidator { 8 | 9 | static startsWithNumber(control: Control): ValidationResult { 10 | 11 | if ( control.value !="" && !isNaN(control.value.charAt(0)) ){ 12 | return {"startsWithNumber": true}; 13 | } 14 | 15 | return null; 16 | } 17 | 18 | static usernameTaken(control: Control): Promise { 19 | 20 | return new Promise((resolve, reject) => { 21 | setTimeout(() => { 22 | if (control.value === "David") { 23 | resolve({"usernameTaken": true}) 24 | } else { 25 | resolve(null); 26 | }; 27 | 28 | }, 1000); 29 | }); 30 | 31 | } 32 | } -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES5", 4 | "module": "commonjs", 5 | "sourceMap": true, 6 | "emitDecoratorMetadata": true, 7 | "experimentalDecorators": true, 8 | "removeComments": false, 9 | "noImplicitAny": false 10 | }, 11 | "exclude": [ 12 | "node_modules" 13 | ] 14 | } -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack'), 2 | path = require('path'); 3 | 4 | module.exports = { 5 | entry: [ 6 | 'webpack/hot/dev-server', 7 | 'webpack-dev-server/client?http://localhost:8080', 8 | path.resolve(__dirname, 'src/app/bootstrap.ts') 9 | ], 10 | output: { 11 | path: path.resolve(__dirname, 'build'), 12 | filename: 'bundle.js', 13 | }, 14 | resolve: { 15 | extentions: ['.ts', '.js'] 16 | }, 17 | module: { 18 | loaders: [{ 19 | test: /\.ts$/, 20 | loader: 'ts-loader?compiler=ntypescript' 21 | }] 22 | } 23 | }; --------------------------------------------------------------------------------