ES Angular Auto Validate

Feature

• auto validate form control
• customize error message
• customize strategy include rendering and inserting
• i18n

Table of contents

• Setup
• Usage
  • Reactive Form
  • Template Driven form
• Customize Error Message
• Customize Strategy

Setup

Need to install the npm module

npm install es-ngx-auto-validate

Usage

Import 'AutoValidateModule' to module and provide 'ERROR_MESSAGE_TOKEN' with 'DefaultErrorMessageMapXXXX' (XXXX is locale name) or customize map

@NgModule{
    imports: [
      AutoValidateModule
    ],
    providers: [
        {provide: ERROR_MESSAGE_TOKEN, useValue: DefaultErrorMessageMapEnUs}
    ]
}
export class AppModule{}

Reactive Form

You can use [esAutoValidate] with formControlName, formGroupName or formArrayName

<form [formGroup]="formGroup" novalidate>
  <div>
    <div>
      <label>Name</label>
    </div>
    <div>
      <input type="text" formControlName="name" name="name" esAutoValidate>
    </div>
  </div>
</form>

or give it 'auto-control' and 'auto-for' directly

<form [formGroup]="formGroup" novalidate>
  <div>
    <div>
      <label>Name</label>
    </div>
    <div>
          <input type="text" formControlName="name" name="name" #name>
    </div>
    <div esAutoValidate [auto-control]="formGroup.get('name')" [auto-for]="name"></div>
  </div>
</form>

check valid before submit

class ReactiveFormDemoComponent{
  formGroup: FromGroup;
  @ViewChildren(AutoValidateDirective) autoValidates: QueryList<AutoValidateDirective>;
  
  submit(){
    if(this.formGroup.valid){
      //submit
    }else {
      this.autoValidates.forEach((autoValidate) => autoValidate.checkError());
    }
  }
}

Template Driven Form

You can use [esAutoValidate] with ngModel

<form>
  <div>
    <div>
      <label>Name</label>
    </div>
    <div>
      <input type="text" [(ngModel)]="data.name" name="name" required esAutoValidate>
    </div>
  </div>
</form>

or give it 'auto-control' and 'auto-for' directly

<form>
  <div>
    <div>
      <label>Name</label>
    </div>
    <div>
      <input type="text" name="name" [(ngModel)]="data.name"
             required #name="ngModel" #nameRef>
    </div>
    <div esAutoValidate [auto-control]="name.control" [auto-for]="nameRef"></div>
  </div>
</form>

check valid before submit

class TemplateDrivenFormDemoComponent{
  @ViewChildren(AutoValidateDirective) autoValidates: QueryList<AutoValidateDirective>;
  @ViewChild(NgForm) ngForm: NgForm;
  
  submit(){
      if(this.ngForm.valid){
        //submit
      }else {
        this.autoValidates.forEach((autoValidate) => autoValidate.checkError());
      }
    }
}

Customize Error Message

Define ErrorMessageMap variable:

export const CustomizeErrorMessageMapEnUs: ErrorMessageMap = {
  required: 'Customize Required',
  max: (err) => {return `Customize Max: ${err.max}`;},
  min: (err) => {return `Customize Min: ${err.min}`;},
  maxlength: (err) => {return `Customize Max Length: ${err.actualLength}/${err.requiredLength}`},
  minlength: (err) => {return `Customize Min Length: ${err.actualLength}/${err.requiredLength}`},
  email: 'Customize Invalid Email Format'
};

And provide it:

@NgModule{
    imports: [
      AutoValidateModule
    ],
    providers: [
        {provide: ERROR_MESSAGE_TOKEN, useValue: CustomizeErrorMessageMapEnUs}
    ]
}
export class AppModule{}

There are some default locale error message as follow: DefaultErrorMessageMapEnUs DefaultErrorMessageMapZhTw

Customize Strategy

Define class and implement RenderDivNodeStrategy

export class CustomizeRenderDivNodeStrategy implements RenderDivNodeStrategy{
  renderDiv(renderer: Renderer2, divNode: any, target: ElementRef){
    renderer.setStyle(divNode, 'color', '#4244a9');
  };

  insertDiv(renderer: Renderer2, divNode: any, target: ElementRef) {
    renderer.appendChild(target.nativeElement.parentNode, divNode);
  };
}