The wj-validation-error directive supports both AngularJS and native HTML5 validation mechanisms. It accepts an arbitrary AngularJS expression that should return an error message string in case of the invalid input and an empty string if the input is valid.

For AngularJS validation it should be used together with the ng-model directive. In this case the wj-validation-error directive reports an error using a call to the NgModelController.$setValidity method with the wjValidationError error key , in the same way as it happens with AngularJS native and custom validation directives.

For HTML5 validation, the wj-validation-error directive sets the error state to the element using the setCustomValidity method from the HTML5 validation API. For example:

<p>HTML5 validation:</p>
<form>
    <input type="password"
        placeholder="Password"
        name="pwd" ng-model="thePwd"
        required minlength="2" />
    <input type="password"
        placeholder="Check Password"
        name="chk" ng-model="chkPwd"
        wj-validation-error="chkPwd != thePwd ? 'Passwords don\'t match' : ''" />
</form>

<p>AngularJS validation:</p>
<form name="ngForm" novalidate>
    <input type="password"
        placeholder="Password"
        name="pwd" ng-model="thePwd"
        required minlength="2" />
    <input type="password"
        placeholder="Check Password"
        name="chk" ng-model="chkPwd"
        wj-validation-error="chkPwd != thePwd" />
    <div
        ng-show="ngForm.chk.$error.wjValidationError && !ngForm.chk.$pristine">
        Sorry, the passwords don't match.
    </div>
</form>