export class HelloWorldComponent {

  constructor() { }

  public lightRuleMapping = UserLightMapping;
  public appModel: Partial<UserLightMapping> = {};

}
          

                
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)
  public name: string = undefined;

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

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

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

}

              

              
<div class="col-12 form-group">
    <label class="control-label">Name</label>
    <input class="form-control" type="text" placeholder="Name" v-model="appModel.name" v-ui-light-validate="lightRuleMapping" ui-light-property="name" ui-light-target="appModel" />
</div>
<div class="col-12 form-group">
    <label class="control-label">UserName</label>
    <input class="form-control" type="text" placeholder="Username" v-model="appModel.username" v-ui-light-validate="lightRuleMapping" ui-light-property="username" ui-light-target="appModel" />
</div>
<div class="col-12 form-group">
    <label class="control-label">Password</label>
    <input class="form-control" type="number" placeholder="Password" v-model="appModel.password" v-ui-light-validate="lightRuleMapping" ui-light-property="password" ui-light-target="appModel" v-on:ui-light-on-validate="onValidateField" />
</div>
<div class="col-12 form-group">
    <label class="control-label">ConfirmPassword</label>
    <input class="form-control" type="number" placeholder="Confirm Password" v-model="appModel.confirmPassword" v-ui-light-validate="lightRuleMapping" ui-light-property="confirmPassword" ui-light-target="appModel" v-bind:ul-target="appModel" v-on:ui-light-on-validate="onValidateField" />
</div>