ng-messages2 v0.1.1

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

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