@ismaelvsqz/angular-form-message

angular-form-message

Installation

To install this library, run:

$ npm install angular-form-message --save

Consuming your library

You can import the library in any Angular application by running:

$ npm install angular-form-message

and then from your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

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

import { FormMessageModule } from 'angular-form-message';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    FormMessageModule.forRoot()
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Sample

You can see a simple example below:

import { Component } from '@angular/core';
import { FormGroup, Validators } from '@angular/forms';
import { FormMessageBuilder } from '@ismaelvsqz/angular-form-message';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {

  form: FormGroup;

  constructor(
    private fb: FormMessageBuilder
  ) {
    this.createForm();
  }

  createForm() {
    this.form = this.fb.group({
      name: ['',
        [Validators.required, Validators.minLength(3), Validators.maxLength(6)],
        null,
        {
          required: 'The name is required',
          minlength: 'The min length is 3',
          maxlength: 'The max length is 6'
        }]
    });
  }
}

To show the messages, you can use the message property.

<div>
  <form [formGroup]="form" novalidate>
    <div>
      <label for="name">Name</label>
      <input id="name" type="text" formControlName="name" />
      <div *ngIf="form.get('name').message">{{form.get('name').message}}</div>
    </div>
  </form>
</div>

Development

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

$ npm run tsc

To lint all *.ts files:

$ npm run lint

License

MIT © Juan Ismael Vasquez