OErrorComponent

Using the o-error component allows to define multiple errors messages associated to its parent o-validator component.

Example


  <o-text-input attr="input" label="{{ 'INPUT.BUTTON.TEXT' | oTranslate }}">
    <o-validator [validator-function]="aValidator">
      <o-error name="requiredLowercaseA" text="Must contain a lowercase 'a'"></o-error>
      <o-error name="requiredUppercaseA" text="Must contain a uppercase 'A'"></o-error>
    </o-validator>
  </o-text-input>

  ...

  import { ValidationErrors, FormControl } from '@angular/forms';

  aValidator(control: FormControl): ValidationErrors {
    let result = {};
    if (control.value && control.value.toString().indexOf('a') === -1) {
      result['requiredLowercaseA'] = true;
    }
    if (control.value && control.value.toString().indexOf('A') === -1) {
      result['requiredUppercaseA'] = true;
    }
    return result;
  }

  ...

Directive: o-error

Inputs

Name Description

name

string

Name of the configured error

text

string

Message displayed when the configured error is present in the component

Updated: