ControlError

Validate and show error messages for both Angular Reactive (model-driven) and template driven form controls.

Reduce or almost eliminate the task of checking the control error and display corresponding user facing message for each form control. This library help you with this.

Easy to integrate and fully customizable error messages.

Install

npm install control-error --save

Import and Initialize

Import ControlErrorModule to your module

import {ControlErrorModule} from 'control-error';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...
    ControlErrorModule.forRoot() // add module with default configurations
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

This is basic initialization see below for further customizations.

Uses with template driven form

Create a form as usual and add <control-error> component for each control where you want to show error message and pass the control to it.

// create a model in ts
formOneModel = {
    email: ''
  };

<form #formOne="ngForm">
  <input [(ngModel)]="formOneModel.email" name="email"
         #emailControl="ngModel"
         [pattern]="patterns.email"
         required>
  <br>
  <control-error [control]="emailControl"></control-error>
<!--above line displays the errors related to email input. -->
</form>

Uses with model driven (Reactive) form

// create a form control
emailControl = new FormControl('', [Validators.required]);

// create form group with all controls
  formGroup = this.fb.group({
    email: this.emailControl
  });

<form [formGroup]="formGroup" >
  <input [formControl]="emailControl" >
  <br>
  <control-error [control]="emailControl" ></control-error>
</form>

Default Error messages

required: `Please fill this field!`,
pattern: 'Please enter matching criteria',
min: `Minimum value is MIN`,
max: `Maximum value is MAX`,
maxlength: `Please enter maximum of MAX_LENGTH characters`,
minlength: `Please enter minimum of MIN_LENGTH characters`,

Now you know how to use this simple library, let's see how can we customize the messages.

Customization

You can provide custom messages for every particular field either at application root level or component level.

This is a basic configuration object required -

{
    messages: { // required
        [key: string]: { // control name
// message to show when  
            required?: string; // error is required
            pattern?: string; // error is pattern
            min?: string; // error is min
            max?: string; // error is max
            maxLength?: string; // error is maxLength
            minLength?: string; // error is minLength
        };
    };
}

Let's assume we have a form with two controls email and password:

<div class="m-10">
  <form #sampleForm="ngForm" >
    <div class="form-field">
      <label for="email" class="mb-1">Email</label>
      <input pInputText id="email" type="email" name="email" autocomplete="off"
             [(ngModel)]="sampleModel.email" #emailControl="ngModel" required>
      <control-error [control]="emailControl"></control-error>
    </div>
    <div class="form-field">
      <label for="password" class="mb-1">Password</label>
      <input pInputText id="password" type="text" name="password" autocomplete="off"
             [(ngModel)]="sampleModel.password" #passwordControl="ngModel" minLength="6" required>
      <control-error [control]="passwordControl"></control-error>
    </div>
  </form>
</div>

NOTE: In Template driven form name of input is the name of control. By default this name is used to show message until you provide the particular name.

<control-error name="email" [control]="emailControl"></control-error>

For the above form this is how we construct configuration object for the email and password control messages:

const config = {
  messages: {
    email: { // name of the email control
      required: 'Please fill email!',
      pattern: 'Please enter a valid email!'
      ...
    },
    password: { // name of the password control
      required: 'Please enter password!',
      pattern: 'Use combination of symbols, numbers and camel case letters!'
      minLength: 'Please enter minimum 6 characters!'
      ...
    }
  }
}

Customize at root level

We can provide messages for controls used in whole app at a single place.

In our app.module.ts provide the config at module import time

import {ControlErrorModule} from 'control-error';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    ControlErrorModule.forRoot(
      config // configuration object we constructed above
    )
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Customize at component level

We can provide different messages for every form at component level.

import {ControlErrorConfig} from 'control-error';

@Component({
  selector: 'app-sample',
  templateUrl: './sample.component.html',
  styleUrls: ['./sample.component.scss'],
  providers: [{
      provide: ControlErrorConfig, 
      useValue: config // configuration object
  }]
})

That's All for now.

A full sample app will be provided very soon!

Give it a try, Hope you enjoy using it!!!