An input validation message to use with PrimeNG

About-the-input-validation-component.txt

It's a component to validate required fields, minimun length, patterns and custom validations.

Example 1 :  Validate: required, minlength and a pattern.
some.component.html
        <input pInputText type="text" name="email"  [(ngModel)]="user.email"
              ngModel #email="ngModel" required minlength="5"
              pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$">

        <app-input-validation [control]="email"
          [errDef]="{ required: 'A email is required',
                      pattern:  'Enter a valid email address',
                      minlength: 'The email should be at least 5 characteres'}" ></app-input-validation>
                      
Example 2:  Validate: required, minlength and a custom function.
some.component.html
      <input pInputText type="text" name="name"  [(ngModel)]="user.name" ngModel #name="ngModel" required minlength="5">

      <app-input-validation [control]="name" [custom]="validateField1"
        [errDef]="{ required:  'A name is required',
                    custom:    'Name must be diferent from sysadm',
                    minlength: 'The name should be at least 5 characteres'}" ></app-input-validation>


some.component.ts
...
// This validation funcion is called by the parâmeter [custom]="validateField1"
// and the component receive the field as argument. 
  validateField1(context: NgModel ): boolean {
    if ( context.control.value === 'sysadm') {
      return false;
    }
    return true;
  }
...

Example 3:  Validate: required, minlength and a custom function envolving 2 fields.
some.component.html

...
  <form #f="ngForm" autocomplete="off" (ngSubmit)="save(f)">
...
<div class="ui-md-6 ui-g-12 ui-fluid">
          <label>Password</label>
          <input pPassword type="password"  name="password"  [(ngModel)]="user.password" 
                ngModel #password="ngModel" required minlength="5" >
        </div>
        <div class="ui-md-6 ui-g-12 ui-fluid">
          <label>Retype Password</label>
          <input pPassword type="password"  name="repassword"  [(ngModel)]="user.repassword"
                required minlength="5"  >
        </div>

<!-- the parameter [form]="f" must be passed to app-input-validation because the validatePassword must use 2 fields from the form -->
     
  ....
        <app-input-validation [control]="password" [custom]="validatePassword" [form]="f"
          [errDef]="{ required: 'A password is required',
                      custom:    'Both passwords must match.',
                      minlength: 'The email should be at least 5 characteres'}" ></app-input-validation>

      </div>

some.component.ts
...
  validatePassword(context: NgForm ): boolean {
    if ( context.form.value.password === context.form.value.repassword ) {
      return true;
    }
    return false;
  }
...

input-validation.component.ts

import { FormControl } from '@angular/forms';
import { Component, OnInit, Input } from '@angular/core';
import { NgModel, NgForm } from '@angular/forms';

@Component({
  selector: 'app-input-validation',
  template: `
    <div *ngIf="hasError()" class="ui-message ui-messages-error">
      {{ errorMessage }}
    </div>
  `,
  styles: [`
    .ui-messages-error {
      margin: 0;
      margin-top: 4px;
    }
  `]
})
export class InputValidationComponent {

  @Input() control: NgModel;
  @Input() form: NgForm;
  @Input() errDef: any;

  @Input() custom: any;

  errorMessages = [];
  errorMessage = '';

  hasError(): boolean {
    this.errorMessages = [];
    this.errorMessage = '';
    if ( this.errDef && ( this.control.errors || this.errDef['custom'] ) ) {
      Object.keys(this.errDef).some(key => {

        if ( this.control.errors && this.control.errors[key]) {
          this.errorMessages.push(this.errDef[key]);
        } else if ( key === 'custom' && !this.runCustom() ) {
          this.errorMessages.push(this.errDef[key]);
        }
        return false;
      });
    }

    for ( const m of this.errorMessages ){
      if ( this.errorMessage.length > 0 ) {
        this.errorMessage = this.errorMessage + '.  ';
      }
      this.errorMessage = this.errorMessage + m;
    }

    return this.errorMessages.length > 0  && this.control.dirty;

  }
  public runCustom(): boolean {
    return this.custom(this);
  }

}