Question

我创建了以下控制器和表单，并实现了多个验证规则。但我似乎无法找到确保confirm_password等于password的最佳方式？

HTML

<div class="col-md-5" ng-controller="RegisterController as vm">
    <form id="sign_up" name="SignUp" ng-submit="vm.register(SignUp)" novalidate>
        <div class="box_form">
            <div class="form-group">
                <label>Email</label>
                <input type="email" class="form-control" name="email" ng-model="vm.email" placeholder="Din email" required>
                <p ng-show="(SignUp.email.$error.email || SignUp.email.$error.required) && (SignUp.terms.$dirty || vm.submitted)" class="help-block ng-binding"
                    style="">Email er invalid.</p>
            </div>
            <div class="form-group">
                <label>Brugernavn</label>
                <input type="text" class="form-control" name="username" ng-model="vm.username" ng-minlength="3" ng-maxlength="14" placeholder="Dit brugernavn"
                    required>
                <p ng-show="SignUp.username.$error. && (SignUp.username.$dirty || vm.submitted)" class="help-block ng-binding" style="">Brugernavn er invalid.</p>
            </div>
            <div class="form-group">
                <label>Adgangskode</label>
                <input type="password" class="form-control" name="password" ng-model="vm.password" ng-minlength="6" ng-maxlength="24" placeholder="Din adgangskode"
                    required>
                <p ng-show="SignUp.password.$error && (SignUp.password.$dirty || vm.submitted)" class="help-block ng-binding" style="">Adgangskode er invalid.</p>
            </div>
            <div class="form-group">
                <label>Adgangskode bekræftelse</label>
                <input type="password" class="form-control" name="confirm_password" ng-model="vm.confirm_password" ng-minlength="6" ng-maxlength="24"
                    ng-model="vm.confirm_password" placeholder="Bekræft din adgangskode" required>
                <p ng-show="(SignUp.confirm_password.$dirty || vm.submitted)" class="help-block ng-binding">Adgangskoderne er ikke ens.</p>
            </div>
            <div class="checkbox-holder text-left">
                <div class="checkbox_2">
                    <input type="checkbox" value="accept" id="check_2" name="terms" ng-model="terms" required>
                    <label for="check_2">
                        <span>I Agree to the
                            <strong>Terms &amp; Conditions</strong>
                        </span>
                    </label>
                </div>
            </div>
            <!-- validation -->
            <p class="alert alert-danger text-center" ng-show="SignUp.terms.$error.required && (SignUp.terms.$dirty || vm.submitted)">Accepter vilkår og betingelser.</p>

            <div class="form-group text-center add_top_30">
                <button class="btn_1" id="sign_up_btn" type="submit">Opret</button>
            </div>
        </div>

    </form>
</div>

控制器

(function () {
  'use strict';

  angular
    .module('KryptoApp')
    .controller('RegisterController', RegisterController);
  RegisterController.$inject = ['$location', '$scope', 'Authentication'];

  function RegisterController($location, $scope, Authentication) {
    var vm = this;

    vm.register = register;

    function register(form) {
      vm.submitted = true;
      if(form.$valid) {
        Authentication.register(vm.email, vm.password, vm.confirm_password, vm.username);
      }
    }


  }

})();

Answer 1

我认为你应该为这种情况创建一个指令：

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

        ngModel.$validators.compareTo = function(modelValue) {
            return modelValue == scope.otherModelValue;
        };

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

module.directive（＆＃34; compareTo＆＃34;，compareTo）;

然后在你的HTML中：

<input type="password" name="confirmPassword" 
    ng-model="registration.user.confirmPassword"
    required 
    compare-to="registration.user.password" />

<div ng-messages="registrationForm.confirmPassword.$error"
  ng-messages-include="messages.html"></div>

验证密码字段在提交或脏的角度

1 个答案: