coryrylan · December 28, 2015 16:45 · Dec 28, 2015 · Dec 28, 2015 · Dec 21, 2015
diff --git a/show-error.component.ts b/show-error.component.ts
@@ -1,3 +1,7 @@
+// 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';
 
@@ -26,10 +30,6 @@ export class ShowError {
     }
 }
 
-// Example
-// <input ngControl="title" />
-// <show-error control="title"></show-error>
-
 // Example Validation Service
 export class ValidatorsService {
     static getValidatorErrorMessage(code: string) {

diff --git a/show-error.component.ts b/show-error.component.ts
@@ -1,5 +1,5 @@
 import {Component, Inject, Host, NgFormModel} from 'angular2/angular2';
-import {ValidatorsService} from '../../services/validation/validators.service';
+import {ValidatorsService} from './services/validation/validators.service';
 
 @Component({
     selector: 'show-error',

diff --git a/show-error.component.ts b/show-error.component.ts
@@ -0,0 +1,127 @@
+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
+// <input ngControl="title" />
+// <show-error control="title"></show-error>
+
+// 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];
+//    }
+//}
No results found