fix: 🐛 customErrors + blurPredicate

Fix customErrors implementation to handle new errors not present in
config + cleanup ref ControlErrorComponent onDestroy + changed
blurPredicate to handle focusout even for SELECT elements

BREAKING CHANGE: No

README.md

@@ -145,10 +145,10 @@ The custom `anchor` can also be added as a directive, in which case it'll act as
 </div>
 ```
 
-- `customErrors` - Additional errors to use for the form field, that aren't specified in the config:
+- `controlErrors` - Additional errors to use for the form field, that aren't specified in the config:
 
 ```html
-<input class="form-control" formControlName="city" placeholder="City" [customErrors]="serverErrors" />
+<input class="form-control" formControlName="country" placeholder="Country" [controlErrors]="extraErrors" />
 ```
 
 ## CSS Styling
@@ -169,16 +169,19 @@ The library adds a `form-submitted` to the submitted form. You can use it to sty
 ```ts
 {
   blurPredicate(element) {
-    return element.tagName === 'INPUT';
+    return element.tagName === 'INPUT' || element.tagName === 'SELECT';
   }
 }
 ```
 
+<<<<<<< HEAD
 <<<<<<< HEAD
 
 - # `controlErrorsOnBlur` - To modify the error display behavior and show the errors on submission alone, set the following input:
 - `controlErrorsOnBlur` - To modify the error display behavior and show the errors on submission alone, set the following input:
-  > > > > > > > master
+  > > > > > > > # master
+- `controlErrorsOnBlur` - To modify the error display behavior and show the errors on submission alone, set the following input:
+  > > > > > > > fix: 🐛 customErrors + blurPredicate
 
 ```html
 <input [controlErrorsOnBlur]="false" formControlName="name" />

projects/ngneat/error-tailor/src/lib/control-error.directive.ts

@@ -95,18 +95,19 @@ export class ControlErrorsDirective implements OnInit, OnDestroy {
 
   ngOnDestroy() {
     this.destroy.next();
+    if (this.ref) this.ref.destroy();
   }
 
   private valueChanges() {
     const controlErrors = this.control.errors;
     if (controlErrors) {
       const [firstKey] = Object.keys(controlErrors);
-      const getError = this.globalErrors[firstKey];
-      if (typeof getError !== 'function') {
+      const getError = this.customErrors[firstKey] || this.globalErrors[firstKey];
+      if (!getError) {
         return;
       }
 
-      const text = this.customErrors[firstKey] || getError(controlErrors[firstKey]);
+      const text = typeof getError === 'function' ? getError(controlErrors[firstKey]) : getError;
       this.setError(text, controlErrors);
     } else if (this.ref) {
       this.setError(null);
@@ -128,7 +129,7 @@ export class ControlErrorsDirective implements OnInit, OnDestroy {
     return {
       ...{
         blurPredicate(element) {
-          return element.tagName === 'INPUT';
+          return element.tagName === 'INPUT' || element.tagName === 'SELECT';
         }
       },
       ...this.config

src/app/app.component.html

@@ -18,12 +18,13 @@
     </div>
 
     <div class="form-group">
-      <input class="form-control" formControlName="country" placeholder="Country" />
+      <input class="form-control" formControlName="country" placeholder="Country" [controlErrors]="extraErrors" />
     </div>
   </section>
 
   <div class="form-group">
     <select formControlName="animal" class="form-control">
+      <option [ngValue]="null">- -</option>
       <option *ngFor="let option of options; index as index" [ngValue]="option">
         {{ option.label }}
       </option>

src/app/app.component.ts

@@ -15,6 +15,11 @@ export class AppComponent {
     id: i + 1
   }));
 
+  extraErrors = {
+    minlength: ({ requiredLength }) => `Use country abbreviation! (min ${requiredLength} chars)`,
+    maxlength: 'Use country abbreviation! (max 3 chars)'
+  };
+
   constructor(private builder: FormBuilder) {}
 
   ngOnInit() {
@@ -25,14 +30,14 @@ export class AppComponent {
       address: this.builder.group(
         {
           city: ['', Validators.required],
-          country: ['', Validators.required]
+          country: ['', [Validators.minLength(2), Validators.maxLength(3)]]
         },
         { validator: addressValidator }
       )
     });
   }
 }
 
-function addressValidator(formGroup: FormGroup) {
-  return { invalidAddress: true };
+function addressValidator(addr: FormGroup) {
+  return addr.value && addr.value.country && addr.value.city ? null : { invalidAddress: true };
 }