feat(ngxErrors): exportAs directive, expose error methods, deprecate “ngErrors” selector

Author: toddmotto

example/app/stock-inventory/components/stock-branch/stock-branch.component.scss

@@ -14,4 +14,7 @@
   line-height: 1;
   padding: 6px 10px;
   margin-top: -1px;
+}
+.required {
+  border: 1px solid #B52D30;
 }

example/app/stock-inventory/components/stock-branch/stock-branch.component.ts

@@ -8,7 +8,9 @@ import { FormGroup } from '@angular/forms';
     <div [formGroup]="parent">
       <div formGroupName="store">
         
-        <input type="text" placeholder="Branch ID" formControlName="branch">
+        <div>
+          <input type="text" placeholder="Branch ID" formControlName="branch">
+        </div>
 
         <div ngxErrors="store.branch">
           <div class="error" ngxError="required" [when]="['dirty', 'touched']">
@@ -21,14 +23,23 @@ import { FormGroup } from '@angular/forms';
             Unknown branch, please check the ID
           </div>
         </div>
+
+        <h1>
+          <p>hasErrors: {{ store.hasErrors | json }}</p>
+          <p>errors: {{ store.errors | json }}</p>
+          <p>getError('minlength'): {{ store.getError('minlength') | json }}</p>
+          <p>hasError('required'): {{ store.hasError('required') | json }}</p>
+        </h1>
         
-        <input type="text" placeholder="Manager Code" formControlName="code">
+        <div>
+          <input [ngStyle]="{ borderColor: store.hasError('required') ? 'red' : 'grey' }" type="text" placeholder="Manager Code" formControlName="code">
+        </div>
 
-        <div ngxErrors="store.code">
+        <div ngxErrors="store.code" #store="ngxErrors">
           <div class="error" ngxError="required" [when]="['touched']">
             Manager ID is required
           </div>
-          <div class="error" [ngxError]="['minlength', 'maxlength']" [when]="['dirty', 'touched']">
+          <div class="error" [ngxError]="['minlength', 'maxlength']" [when]="['dirty']">
             Minlength is 2, max length is 5
           </div>
         </div>

src/ngxerror.directive.ts

@@ -15,19 +15,14 @@ import { ErrorOptions } from './ngxerrors';
 import { toArray } from './utils/toArray';
 
 @Directive({
-  selector: '[ngError],[ngxError]'
+  selector: '[ngxError]'
 })
 export class NgxErrorDirective implements OnInit, OnDestroy, DoCheck {
 
   @Input() set ngxError(value: ErrorOptions) {
     this.errorNames = toArray(value);
   }
 
-  @Input() set ngError(value: ErrorOptions) {
-    this.errorNames = toArray(value);
-    console.warn('Warning: You are using the [ngErrors] directive which has been deprecated and will be removed in the next release. Use [ngxErrors] instead.');
-  }
-
   @Input() set when(value: ErrorOptions) {
     this.rules = toArray(value);
   }
@@ -55,6 +50,7 @@ export class NgxErrorDirective implements OnInit, OnDestroy, DoCheck {
     this.states = this._states.asObservable().distinctUntilChanged();
 
     const errors = this.ngxErrors.subject
+      .filter(Boolean)
       .filter(obj => this.errorNames.includes(obj.errorName));
 
     const states = this.states

src/ngxerrors.directive.ts

@@ -1,40 +1,62 @@
-import { Directive, Input, OnInit } from '@angular/core';
+import { Directive, Input, OnChanges, SimpleChanges } from '@angular/core';
 import { FormGroupDirective, AbstractControl } from '@angular/forms';
 
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
 import { ErrorDetails } from './ngxerrors';
 
 @Directive({
-  selector: '[ngErrors],[ngxErrors]'
+  selector: '[ngxErrors]',
+  exportAs: 'ngxErrors'
 })
-export class NgxErrorsDirective implements OnInit {
+export class NgxErrorsDirective implements OnChanges {
 
   @Input('ngxErrors')
   controlName: string;
 
-  @Input('ngErrors') set ngErrors(value) {
-    this.controlName = value;
-    console.warn('Warning: You are using the [ngErrors] directive which has been deprecated and will be removed in the next release. Use [ngxErrors] instead.');
-  }
-
-  subject: BehaviorSubject<ErrorDetails>;
+  subject = new BehaviorSubject<ErrorDetails>(null);
 
   control: AbstractControl;
 
+  done: boolean = false;
+  
   constructor(
     private form: FormGroupDirective
   ) {}
 
-  ngOnInit() {
-    this.subject = new BehaviorSubject<ErrorDetails>(null);
-    this.control = this.form.control.get(this.controlName);
-    this.control.statusChanges.subscribe(this.checkStatus.bind(this));
-    this.checkStatus();
+  get errors() {
+    if (!this.done) return;
+    return this.control.errors;
+  }
+
+  get hasErrors() {
+    return !!this.errors;
+  }
+  
+  hasError(name: string) {
+    if (!this.done) return;
+    return this.control.hasError(name);
+  }
+
+  getError(name: string) {
+    if (!this.done) return;
+    return this.control.getError(name);
+  }
+
+  ngAfterViewInit() {
+    setTimeout(() => {
+      this.checkStatus();
+      this.control.statusChanges.subscribe(this.checkStatus.bind(this));
+    });
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    this.control = this.form.control.get(changes.controlName.currentValue);
   }
 
   checkStatus() {
     const errors = this.control.errors;
+    this.done = true;
     if (!errors) return;
     for (const error in errors) {
       this.subject.next({ control: this.control, errorName: error });