确认密码验证 angularjs material design

Question

我想使用 angularjs 显示一个错误，在“确认密码”输入下应该显示“密码不匹配”。

<form name="settingsForm" ng-submit="vm.login(vm.credentials)" novalidate>
    <md-input-container class="md-block" flex-gt-sm="">
        <label translate="MY_PROFILE_NEW_PASSWORD"></label>
        <input type="password" name="newPassword" id="password"
               ng-model="vm.newPassword" 
               required="" 
               ng-minlength="8"
               md-maxlength="40">
        <div ng-messages="settingsForm.newPassword.$error"
            role="alert" 
            multiple="">
            <div ng-message="required" 
                class="my-message" 
                translate="LOGIN_PASSWORD_INVALID">
            </div>
            <div ng-message="minlength" 
                class="my-message" 
                translate="MIN_8_CHARS">
            </div>
        </div>
    </md-input-container>
    <md-input-container class="md-block" flex-gt-sm="">
        <label translate="MY_PROFILE_CONFIRM_NEW_PASSWORD"></label>
        <input type="password" 
             name="confirmPassword" 
             id="confirmPassword"
             ng-model="vm.confirmPassword" 
             required=""
             confirm-password="vm.newPassword"
             ng-minlength="8"
             md-maxlength="40">
    <div ng-messages="settingsForm.$error.confirmPassword" 
    role="alert" multiple="" >
    <div ng-message="required" 
        class="my-message" 
        translate="LOGIN_PASSWORD_INVALID">
    </div>
    <div ng-message="minlength" 
        class="my-message" 
        translate="MIN_8_CHARS">
    </div>
</div>
<div ng-message="required" 
    class="my-message" 
    translate="LOGIN_PASSWORD_INVALID">
</div>
<div ng-message="confirm-password" 
    class="my-message"> 

    Passwords don't match.

    </div>
    </md-input-container>
    <md-button class="md-raised md-primary btn-auth" 
    type="submit" 
    ng-disabled="settingsForm.$invalid"
    translate="SUBMIT" 
    ng-click="vm.changePassword(vm)">
    </md-button>

我需要让这个表单针对每个特定情况显示错误消息。 我还没有找到“确认密码”属性应该如何用于验证。

Answer 1

您必须创建自定义指令。试试这个。

<div data-ng-controller="PasswordController as vmPassword">
   <form name="passwordForm">
     <md-input-container class="md-block" flex-gt-sm>
        <label>Password</label>
        <input type="password"
               name="password"
               ng-model="vmPassword.password"
               required
        />
        <div ng-messages="passwordForm.password.$error" role="alert" class="form-errors first-name-error">
               <div ng-message="required">Password is required.</div>
        </div>
     </md-input-container>

     <md-input-container class="md-block" flex-gt-sm>
        <label>Confirm Password</label>
        <input type="password"
               name="confirm_password"
               ng-model="vmPassword.confirm_password"
               required
               compare-to="vmPassword.password"
        />
         <div ng-messages="passwordForm.confirm_password.$error" role="alert" class="form-errors first-name-error">
             <div ng-message="required">Password is required.</div>
             <div ng-message="compareTo">Passwords do not match</div>
         </div>
    </md-input-container>
</form>
</div>

自定义指令

(function () {
    "use strict";

    angular.module('app').directive('compareTo', compareTo);

    compareTo.$inject = [];

    function compareTo() {

        return {
            require: "ngModel",
            scope: {
                compareTolValue: "=compareTo"
            },
            link: function(scope, element, attributes, ngModel) {

                ngModel.$validators.compareTo = function(modelValue) {

                    return modelValue == scope.compareTolValue;
                };

                scope.$watch("compareTolValue", function() {
                    ngModel.$validate();
                });
            }
        };
    }
})();

祝你好运！ :)

在这里演示 - http://embed.plnkr.co/UK4G4Lm5BCNNe5SWoA9r/