ng-messages2 - Angular version of ng-message

Angular (Angular 2+) version of ng-message.

This libary is still in progress. Please check out our list of issues to see all the things we are implementing

Demo

[See it in action] (https://changliuunsw.github.io/ng-messages2/)

Installation

To install this library, run:

$ npm install ng-messages2 --save

Usage

import ClNgMessageModule in your app's main module app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import ng-messages2
import { ClNgMessageModule } from 'ng-messages2';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // Specify ng-messages2 as an import
    ClNgMessageModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once it is imported, you can use it in your Angular application:

<!-- You can now use ng-messages2 in app.component.html -->
<form [formGroup]="formGroup">
    <label for="phoneNumber">Phone Number</label>
        <input type="text" id="phoneNumber" name="phoneNumber" formControlName="phoneNumber" required>
        <cl-ng-messages [control]="formGroup.get('phoneNumber')">
          <template clNgMessage="required">
             This is required
          </template>
          <template clNgMessage="pattern">
            the format of phone number is not correct
          </template>
        </cl-ng-messages>
</form>

Development

To generate all *.js, *.js.map and *.d.ts files:

$ npm run tsc

To lint all *.ts files:

$ npm run lint

License

MIT © Chang Liu