javascript - Angularjs $setValidity 来自指令未更新

Question

我正在尝试构建一个自定义指令(基于我看到的示例)以确保确认密码正确。我在 $setValidity 标签上遇到了一些麻烦，尽管我所有的 console.log() 都执行并打印出来，但有效性似乎没有被更新。即使我在控制台中读到“设置为 false”，Pass 仍保持 true。我确保名称和 ng-model 相同，并且我还尝试使用scope.$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

如果您在同一元素上使用指令并在 require 中使用 ng-model，则无需使用 $watch 进行确认。所以你的代码可以是

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;
      }
}

最简单的例子 plunk https://plnkr.co/edit/vPbICfSCDnwHKh07DAXJ?p=preview