ngx-input-msg v1.0.2

ngx-input-msg

Provides form input live validation for Angular 5+ projects. Demo

This project is inspired by AngularJS ng-messages module.

Features

• Integrated with Angular template driven forms.

• Minifies boilerplate code, easy to add error messages to form inputs.

• Supports HTML5 like validation syntax (required, min, max, minlength, maxlength, pattern). It is also provides email and integer validators.

• Flexible. You can configure error messages once via InputMsgConfigService and provide them to the entire application or set the specific message to the specific input.

• Compatible with Angular Material Design form-field element as well as basic HTML input.

Get started

1. Install Module to your Angular project via: npm install ngx-input-msg --save.

2. Import InputMsgModule to your feature module.

import { NgModule } from '@angular/core';
import { InputMsgModule } from 'ngx-input-msg';

@NgModule({
  imports: [
    InputMsgModule
  ],
  declarations: [],
  providers: []
})
export class FeatureModule { }

3. Provide Angular Material to the app, if you are going to use Material style inputs.

4. Inside a <form>, add ngxInputText directive to an <input> element, then append <ngx-msg> component to show error messages. See Demo

API Reference

AbstractInput

This base class describes common properties and methods for all input directives. Each input directive extends AbstractInput to provide its specific validation parameters and behaviors.

@Input() properties

* Whether an @Input argument could be changed after the directive has been initialized.

AbstractInput also toggles ngx-input_invalid CSS class when an input status changes.

InputEmailDirective extends AbstractInput

Directive to validate an <input> or <input type="email"> element as an email address.

Selector: [ngxInputEmail]

InputNumberDirective extends AbstractInput

Directive to validate an <input type="number"> element.

Selector: [ngxInputNumber][type="number"]

Optional @Input() properties

InputTextDirective extends AbstractInput

Directive to validate text like <input> or <textarea> elements.

Selector: input[ngxInputText], textarea[ngxInputText]

Optional @Input() properties

LabelDirective

Highlights <label> element when a bound input is invalid. It is also toggles ngx-input_invalid CSS class when an input status changes.

Selector: [ngxLabel]

Required @Input() properties

MsgComponent

Displays a message for an input element depending on it`s validation status. Only one message can be shown at a time.

Selector: ngx-msg

@Input() properties

* A function that returns an error message dynamically, depending on label (or placeholder) value.

type MsgFn = (label: string, validationParamValue?: any) => string;

InputMsgConfigService

Provides configuration for displaying messages.

Methods

  interface InputMsgConfigService {
    public get(): Config;
    public set(config: Config): void; 
  }

  
  interface Config {
    colors?: {
      // color to highlight <ngx-msg> and <label> elements when an input is invalid
      error?: string;
      // color to highlight <ngx-msg> element when max length was reached
      maxlength?: string;
    };
    // Position to show a message
    position?: 'bottom-left' | 'bottom-right';
    // Message texts
    msg?: {
      [validatorName: string]: string | MsgFn;
    };
  }

Tip: set default messages by set() method to provide them to all <ngx-msg> components of the application. If a specific message is not provided to <ngx-msg> component, a default message is used instead. You could also use default messages from the box. See the default config below.

Default Config

  {
    colors: {
      error: '#f44336',
      maxlength: 'grey'
    },
    position: 'bottom-left',
    msg: {
      email: (label: string) => `Wrong ${label}`,
      integer: 'Fractional digits are forbidden',
      max: (label: string, allowed: number) => `Maximum allowed ${label} is ${allowed}`,
      min: (label: string, allowed: number) => `Minimum allowed ${label} is ${allowed}`,
      maxlength: (label: string, allowed: number) => `Maximum ${allowed} chars limit was reached`,
      minlength: (label: string, allowed: number) => `At least ${allowed} chars length are required`,
      pattern: (label: string) => `Invalid ${label}`,
      required: (label: string) => `${label} is required`
    }
  };