wj-validation-errorディレクティブは、AngularJSとHTML5ネイティブの両方の 検証メカニズムをサポートしています。このディレクティブはAngularJS式を受け取ります。 無効な入力が行われたり、入力が有効でも 空の文字列である場合に、その式からエラーメッセージ文字列を返すように設定します。

AngularJS検証の場合は、ng-model ディレクティブと組み合わせて使用する必要があります。 その場合、wj-validation-error ディレクティブは、 wjValidationError エラーキーを指定したNgModelController.$setValidityメソッドの呼び出しを使用してエラーを報告します。 これは、AngularJSネイティブおよびカスタム検証ディレクティブの動作と同じです。

HTML5検証の場合、wj-validation-error ディレクティブは、 HTML5検証APIの setCustomValidity メソッドを使用して、要素にエラー状態を設定します。次に例を示します。

<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>