Last active
December 28, 2015 16:45
-
-
Save coryrylan/c6f2df5143c3844c995a to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Example | |
| // <input ngControl="title" /> | |
| // <show-error control="title"></show-error> | |
| import {Component, Inject, Host, NgFormModel} from 'angular2/angular2'; | |
| import {ValidatorsService} from './services/validation/validators.service'; | |
| @Component({ | |
| selector: 'show-error', | |
| properties: ['controlPath: control'], | |
| template: `<span *ngIf="errorMessage !== null">{{errorMessage}}</span>` | |
| }) | |
| export class ShowError { | |
| controlPath: string; | |
| constructor( | |
| @Host() private _formDir: NgFormModel) { | |
| } | |
| get errorMessage() { | |
| var c = this._formDir.form.find(this.controlPath); | |
| for (let propertyName in c.errors) { | |
| if (c.errors.hasOwnProperty(propertyName)) { | |
| if (c.touched) { | |
| return ValidatorsService.getValidatorErrorMessage(propertyName); | |
| } | |
| } | |
| } | |
| return null; | |
| } | |
| } | |
| // Example Validation Service | |
| export class ValidatorsService { | |
| static getValidatorErrorMessage(code: string) { | |
| let config = { | |
| 'required': 'Required', | |
| 'invalidInteger': 'Not valid number', | |
| 'invalidCreditCard': 'Is invalid credit card number', | |
| 'invalidEmailAddress': 'Invalid email address', | |
| 'invalidPassword': 'Invalid password. Password must be at least 6 characters long, and contain a number.' | |
| }; | |
| return config[code]; | |
| } | |
| static integerValidator(control) { | |
| if (!Number.isInteger(parseInt(control.value, 10))) { | |
| return { 'invalidInteger': true }; | |
| } | |
| } | |
| static creditCardValidator(control) { | |
| // Visa, MasterCard, American Express, Diners Club, Discover, JCB | |
| if (control.value.match(/^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11})$/)) { | |
| return null; | |
| } else { | |
| return { 'invalidCreditCard': true }; | |
| } | |
| } | |
| static emailValidator(control) { | |
| // RFC 2822 compliant regex | |
| if (control.value.match(/[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/)) { | |
| return null; | |
| } else { | |
| return { 'invalidEmailAddress': true }; | |
| } | |
| } | |
| static passwordValidator(control) { | |
| // {6,100} - Assert password is between 6 and 100 characters | |
| // (?=.*[0-9]) - Assert a string has at least one number | |
| if (control.value.match(/^(?=.*[0-9])[a-zA-Z0-9!@#$%^&*]{6,100}$/)) { | |
| return null; | |
| } else { | |
| return { 'invalidPassword': true }; | |
| } | |
| } | |
| } | |
| /** | |
| * original from the angular repo required to pass in list of error messages. New one above looks at the control's own errors and maps to the error messages - Cory | |
| * This is a component that displays an error message. | |
| * https://github.com/angular/angular/blob/master/modules/examples/src/model_driven_forms/index.ts | |
| * | |
| * For instance, | |
| * | |
| * <show-error control="creditCard" [errors]="['required', 'invalidCreditCard']"></show-error> | |
| * | |
| * Will display the "is required" error if the control is empty, and "invalid credit card" if the | |
| * control is not empty | |
| * but not valid. | |
| * | |
| * In a real application, this component would receive a service that would map an error code to an | |
| * actual error message. | |
| * To make it simple, we are using a simple map here. | |
| */ | |
| //@Component({ selector: 'show-error', properties: ['controlPath: control', 'errorTypes: errors'] }) | |
| //@View({ | |
| // template: ` | |
| // <span *ngIf="errorMessage !== null">{{errorMessage}}</span> | |
| // `, | |
| // directives: [NgIf] | |
| //}) | |
| //class ShowError { | |
| // formDir; | |
| // controlPath: string; | |
| // errorTypes: string[]; | |
| // constructor( @Host() formDir: NgFormModel) { this.formDir = formDir; } | |
| // get errorMessage() { | |
| // var c = this.formDir.form.find(this.controlPath); | |
| // for (var i = 0; i < this.errorTypes.length; ++i) { | |
| // if (isPresent(c) && c.touched && c.hasError(this.errorTypes[i])) { | |
| // return this._errorMessage(this.errorTypes[i]); | |
| // } | |
| // } | |
| // return null; | |
| // } | |
| // _errorMessage(code) { | |
| // var config = { 'required': 'is required', 'invalidCreditCard': 'is invalid credit card number' }; | |
| // return config[code]; | |
| // } | |
| //} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment