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 };
 }