简体   繁体   中英

AngularJS UI Validate Password Fields

Trying to get Angular-ui-validate to work with my form with bootstrapcss

Here is the HTML

<div class='container' ng-controller='RegisterController as ctrl'>
        <form class="form-register" ng-submit="ctrl.register()">
            <h2 class=form-user-details">General Information</h2>
            <div class="form-group">
                <label for="inputEmail1">Email address</label> <input type="email"
                    class="form-control" ng-model='inputEmail' id="inputEmail1"
                    placeholder="Email" required autofocus> <span
                    style='font-size: 10px; color: red'>Note: Your email will
                    serve as your username!</span>
            </div>
            <div class="form-group" ng-class="{'has-error': !form.confirm_password.$error.validator}">
                <label for="inputPassword">Password</label> <input name='password'
                    type="password" id='inputPassword' ng-model='password'
                    class="form-control" placeholder="Enter Password"  ng-minlength="6" ng-maxlength="30" required>
                <input type="password" class="form-control" name='confirm_password'
                    placeholder="Re-enter Password" ui-validate="'$value==password'"
                    ui-validate-watch="'password'"> 
            </div>
            <button class="btn btn-lg btn-primary btn-block" type="submit">Create
                Account</button>
        </form>
    </div>

Link to angular-ui-validate https://github.com/angular-ui/ui-validate/blob/master/dist/validate.min.js

Link to example I saw: password-check directive in angularjs 3rd example down

Seems easy enough but !form.confirm_password.$error.validator is always true without exception

Few things actually happened... First I am stupid and forgot to put ui-validate in my model dependencies...

Then I needed to add a ng-model to the confirm_password field...

And finally I needed to add the name form to my form.

Then it worked...

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM