Question

我正在尝试构建自定义指令（基于我看到的示例）以确保确认密码正确。我使用$ setValidity标签遇到了一些问题，尽管我的所有console.log（）都执行并打印出来，但似乎没有更新有效性。即使我在控制台中读取“设置为假”，通过也会保持正确。我确定名称和ng模型是相同的，我也尝试使用范围。$ apply，但是会出现错误，说我正在尝试应用其他东西时应用。

这是我的代码： HTML

<form ng-submit="signup()" name="profileForm">


            <div class="form-group">
              <label class="form-label" for="input-example-2">Password</label>
              <input class="form-input" ng-model="pnew" type="password" name="pnew" placeholder="Password" required>
            </div>
            <div class="form-group">
              <label class="form-label" for="input-example-2">Confirm Password</label>
              <input class="form-input" name="confirm" ng-model="confirm" type="password"  placeholder="Password" required pwcheck>
            </div>
            {{profileForm.confrim.$error.pass}}
            <hr>
            {{profileForm.confirm.$error}}
            <hr>
            {{profileForm.confirm.$valid}}
            <span ng-show="profileForm.confirm.$error.pwCheck"> the passwords dont match</span>
            <div class="form-group">
              <button class="btn btn-primary">Sign up</button>
            </div>
          </form>

pwcheck指令的JS代码

.directive('pwcheck', function() {   
  return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
      function valid(value){
          scope.$watch("confirm", function(newval, oldval){
            console.log(value);
            console.log(scope.pnew);
              if(value==scope.pnew){
                console.log("success!");
                ctrl.$setValidity('pass', true);
                return value;
              }
              else {
                console.log("set to false");
                ctrl.$setValidity('pass', false);
                return undefined;
              }

          });
      }
      ctrl.$parsers.push(valid);
    }   } });

Answer 1

无需使用$ watch确认您是否在同一元素＆amp;需要ng-model。所以你的代码可以是

ctrl.$parsers.unshift(valid);
ctrl.$formatters.unshift(valid);

function valid(viewValue){
    console.log(viewValue);
    console.log(scope.pnew);
      if(viewValue==scope.pnew){
        console.log("success!");
        ctrl.$setValidity('pass', true);
        return viewValue;
      }
      else {
        console.log("set to false");
        ctrl.$setValidity('pass', false);
        return undefined;
      }
}

最琐碎的例子 https://plnkr.co/edit/vPbICfSCDnwHKh07DAXJ?p=preview

来自不更新

1 个答案: