README

light-validate-angular-ui

Angular UI module for working with the light-validate Library. This module provides a directive that controls properties of an html element based on a class with Light Validate mappings, and display error label when input is invalid, or hide the label when input is valid.

Sample

https://minatonda.github.io/light-validate-angular-ui/

Install

$ npm install -save light-validate
$ npm install -save light-validate-angular-ui
$ npm install -save reflect-metadata

Development and Implementation - Configuring on Angular ...

Add the 'UiLightValidateModule' on imports array of your Component's Module.

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    // angular application modules.
    BrowserModule,
    CommonModule,
    FormsModule,
    // light-validate-angular-ui modules.
    UiLightValidateModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Customize Label Messages

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    // angular application modules.
    BrowserModule,
    CommonModule,
    FormsModule,
    // light-validate-angular-ui modules.
    UiLightValidateModule.forRoot(
      resolver: {
        label: (exception) => {
          // the value you return here will be the value displayed in error labels error messages, use Light Exception data to compose the message as desired.
          return `${exception.code} ${exception.property}`;
        },
        mappings: [
            // register your mapping classes here to access directly by name in the directive declaration in the template
            UserLightMapping
        ]
      }
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Development and Implementation - Create your LightRules ...

Create some LightRules...

import { LightRule } from 'light-validate';

export const LightRuleRequired: LightRule = async (value, target) => {
  if (!value) {
    throw 'Value must be not empty';
  }
}

export const LightRuleMustBeTheSame = (property) => {
  const rule: LightRule = async (value, target) => {
    if (value === target[property]) {
      throw 'Value must be the same';
    }
  }
  return rule;
}

export const LightRuleMustNotBeTheSame = (property) => {
  const rule: LightRule = async (value, target) => {
    if (value === target[property]) {
      throw 'Value must not be the same';
    }
  }
  return rule;
}

export const LightRuleOnlyNumber: LightRule = async (value, target) => {
  if ((typeof value) !== 'number') {
    throw 'Value is not a Number';
  }
}

export const LightRuleOnlyText: LightRule = async (value, target) => {
  if ((typeof value) !== 'string') {
    throw 'Value is not a Text';
  }
}

Development and Implementation - Create your Mapping Class ...

Create your mapping class...

import { LightValidate } from 'light-validate';
import { LightRuleOnlyText } from './light-rule-only-text';
import { LightRuleOnlyNumber } from './light-rule-only-number';
import { LightRuleMustNotBeTheSame } from './light-rule-must-not-be-the-same';
import { LightRuleMustBeTheSame } from './light-rule-must-be-the-same';
import { LightRuleRequired } from './light-rule-required';

export class UserLightMapping {

  @LightValidate(LightRuleRequired, LightRuleOnlyText, LightRuleMustNotBeTheSame('username'))
  public name: string = undefined;

  @LightValidate(LightRuleRequired, LightRuleOnlyText, LightRuleMustNotBeTheSame('name'))
  public username: string = undefined;

  @LightValidate(LightRuleRequired, LightRuleOnlyNumber, LightRuleMustBeTheSame('confirmPassword'))
  public password: string = undefined;

  @LightValidate(LightRuleRequired, LightRuleOnlyNumber, LightRuleMustBeTheSame('password'))
  public confirmPassword: string = undefined;

}

Development and Implementation - Use on Component ...

Add your target mapping class to an component property

import { UserLightMapping } from 'src/mappings/user.light-mapping';

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

  public title = 'light-validate-angular-ui';

  constructor() { }

  // You can also register an array of mapping classes in the forRoot function, and pass the class name as a string in the directive's 'UiLightValidate' attribute value, instead of using binding directly on the component.
  public lightRuleMapping = UserLightMapping; // <- Mapping Class Property

  // Here, I set my data model type to Partial <MyMappingClass> for typing purposes only, the typing code is optional, but the object to be validated must follow the interface of the target mapping class.
  public appModel: Partial<UserLightMapping> = {}; // <- Your Data Model.
  
  
}

And call the directive on your template code

<!-- [UiLightValidate] attribute needs to bind the Mapping Class -->
<!-- UiLightProperty needs to receive the property name to be validated on directive -->
<!-- [UiLightTarget] attribute needs to bind target model to be validate on directive-->
<div style="text-align:center">
  <br>
  <div>
    <label>Name</label>
    <br>
    <input type="text" placeholder="Name" [(ngModel)]="appModel.name" [UiLightValidate]="lightRuleMapping"
      UiLightProperty="name" [UiLightTarget]="appModel">
  </div>
  <br>
  <div>
    <label>UserName</label>
    <br>
    <input type="text" placeholder="Username" [(ngModel)]="appModel.username" [UiLightValidate]="lightRuleMapping"
      UiLightProperty="username" [UiLightTarget]="appModel">
  </div>
  <br>
  <div>
    <label>Password</label>
    <br>
    <input type="number" placeholder="Password" [(ngModel)]="appModel.password" [UiLightValidate]="lightRuleMapping"
      UiLightProperty="password" [UiLightTarget]="appModel">
  </div>
  <br>
  <div>
    <label>ConfirmPassword</label>
    <br>
    <input type="number" 
           placeholder="Confirm Password" 
           [(ngModel)]="appModel.confirmPassword"
           [UiLightValidate]="lightRuleMapping" 
           UiLightProperty="confirmPassword" 
           [UiLightTarget]="appModel">
        <!--  
            If you registered the mapping class in the mappings parameter in the module's forRoot function, you can also use the name of mapping it as follows:
            UiLightValidate="UserLightMapping" 
        !-->
  </div>
</div>

Attributes

Attribute	Description	Type	Default
UiLightValidate	Directive selector, also receives the mapping class directly, or the name of the class if the mapping class is registered on forRoot 'mapping' option.	Object/string	undefined
UiLightProperty	Receives the property key of the target to be validated.	string	undefined
UiLightTarget	Receives the target to be validated.	Object	undefined
ui-light-validate-on-blur	Enables validation on the blur event of the element.	boolean	true
ui-light-validate-on-change	Enables validation on the change event of the element.	boolean	true
ui-light-validate-on-keyup	Enables validation on the keyup event of the element.	boolean	true
ui-light-validate-icon-enabled	Enables the validation icon.	boolean	false
ui-light-validate-invalid-class	Receives the name of the class that will represent the invalid state of the element.	string	light-invalid
ui-light-validate-valid-class	Receives the name of the class that will represent the valid state of the element.	string	light-valid
ui-light-validate-message-class	Receives the name of the label class that will represent the state of the element.	string	light-message

Usage no npm install needed!