Input Matcher

This is a small demo for the input matcher. It showcases using it and displaying custom errors for the specific case where they do not match.

by Evan Sharp

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="https://rawgit.com/TheSharpieOne/angular-input-match/master/dist/angular-validation-match.min.js"></script>
<!-- Scripts are in the Resouce panel -->
<div data-ng-app="myApp">
    <p>
        This is a very basic example/demo.<br />
        It will only fire after the confirm field has been modified (is no longer pristine)
    </p>
    <hr />
    <form name="myForm">
        Password: <input ng-model="user.password" type="number" name="password" data-ng-class="{'ng-invalid':myForm.confirmPassword.$error.match}" />
        Confirm: <input ng-model="user.passwordConfirm" type="number" data-match="myForm.password" name="confirmPassword" />
        <div data-ng-show="myForm.confirmPassword.$error.match">Passwords do not match!</div>
    </form>
    <hr />
    <p>Mis-match? {{myForm.confirmPassword.$error.match}}</p>
</div>

CSS

input{
    border:1px solid black;
    outline:none;
}
input.ng-invalid{
    border-color: red;
}

JavaScript

// Scripts are in the Resouce panel

angular.module('myApp',['validation.match'])