@richnologies/forms

@richnologies/forms

Extra functionality to deal with forms. Validators and soon more

Features

• Validators
• Error Hint Handler

Installation

To install this library, run:

$ npm install @richnologies/forms --save

Using the library

Import the RFormsModule into the application

This module does not require any configuration

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

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

// Import your library
import { RFormsModule } from '@richnologies/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    RFormsModule,
    LibraryModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once imported, it can be used both for Template Driven and Reactive Forms

Validators

This module provides some common validators so they are easier to use than the general pattern Validator.

Validator	Directive	Function	Error
email	emailValidator	emailValidator	email-validator
phone	phonelValidator	phoneValidator	phone-validator
Zip Code	zipCodeValidator	zipCodeValidator	zip-code-validator
Coordinate	coordinateValidator	coordinateValidator	coordinate-validator
IP	ipValidator	ipValidator	ip-validator
URL	urlValidator	urlValidator	url-validator
MongoId	mongoIdValidator	mongoIdValidator	mongo-id-validator

Template Driven Froms

<!-- You can now use your library component in app.component.html -->
<form novalidate #form="ngForm" (onSubmit)="onSubmit(form)">
    <input type="text" ngModel name="email" required emailValidator>
    <input type="text" ngModel name="phone" phoneValidator>
    <input type="text" ngModel name="zipCode" required zipCodeValidator>
    <input type="text" ngModel name="coordinate" coordinateValidator>
    <input type="text" ngModel name="ip" required ipValidator>
    <input type="text" ngModel name="url" required urlValidator>
    <input type="text" ngModel name="_id" required mongoIdValidator>
</form>

Reactive Forms

// hello-world.html

<form novalidate [formGroup]="form" (onSubmit)="onSubmit(form)">
    <input type="text" formControllerName="email">
    <input type="text" formControllerName="phone">
    <input type="text" formControllerName="zipCode">
    <input type="text" formControllerName="coordinate">
    <input type="text" formControllerName="ip">
    <input type="text" formControllerName="url">
    <input type="text" formControllerName="_id">
</form>

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

import * as RValidators from '@richnologies/forms';

@Component({
    selector: 'app-hello-world',
    templateUrl: './hello-world.html'
})
export class FormComponent implements OnInit {
    form: FormGroup;
    
    constructor(private fb: FormBuilder) {}
    
    ngOnInit() {
        this.form = this.fb.group({
           email: ['', [Validators.required, RValidators.emailValidator]],
           phone: ['', [RValidators.phoneValidator]],
           zipCode: ['', [Validators.required, RValidators.zipCodeValidator]],
           coordindate: ['', [RValidators.coordinateValidator]],
           ip: ['', [Validators.required, RValidators.ipValidator]],
           url: ['', [Validators.required, RValidators.urlValidator]],
           _id: ['', [Validators.required, RValidators.mongoIdValidator]]
        });
    }
}

Error Hint Handler

This component is meant to work as a hint message generator

It takes two inputs:

• rErrorHint
• control

Error hint is an object when each key is a possible error code, and the value for each key is the desired error message when that error happend

Control is a reference to the form control. The directive will update the inner HTML of the host element to represent the error message.

It is important to note that the order of validators matter, since the error to be display is the first to be founded. So for example in the case of the email, if email-validator is passed first to the form builder, the required error message will never be displayed, since every time is not set is also not valid.

// hello-world.html

<form novalidate [formGroup]="form" (onSubmit)="onSubmit(form)">
    <input type="text" formControllerName="email">
    <span [rErrorHint]="errors.email" [control]="login.get('email')">
    </span>
    <input type="text" formControllerName="phone">
    <input type="text" formControllerName="zipCode">
    <input type="text" formControllerName="coordinate">
    <input type="text" formControllerName="ip">
    <input type="text" formControllerName="url">
</form>

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

import * as RValidators from '@richnologies/forms';

@Component({
    selector: 'app-hello-world',
    templateUrl: './hello-world.html'
})
export class FormComponent implements OnInit {
    form: FormGroup;

    errors = {
        email: {
            required: 'The email is required',
            'email-validator': 'The email is not valid'
        }
    };
    
    constructor(private fb: FormBuilder) {}
    
    ngOnInit() {
        this.form = this.fb.group({
           email: ['', [Validators.required, RValidators.emailValidator]],
           phone: ['', [RValidators.phoneValidator]],
           zipCode: ['', [Validators.required, RValidators.zipCodeValidator]],
           coordindate: ['', [RValidators.coordinateValidator]],
           ip: ['', [Validators.required, RValidators.ipValidator]],
           url: ['', [Validators.required, RValidators.urlValidator]]
        });
    }
}

Development

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

$ npm run tsc

To lint all *.ts files:

$ npm run lint

License

MIT © Ricardo Sánchez Gregorio