css - 编辑复式输入字段时更新 ng-invalid

Question

我有一个密码和密码确认字段，使用指令连接。除此之外，我还有在 ng-invalid 时设置边框颜色的 CSS。问题是，例如，当我首先输入 confirm_password 然后在 password 中输入相同内容时，它不会删除“ng-invalid”。在编辑 password 时，有没有办法告诉 angular 更新其他字段类？

html

<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"
           equals="vm.confirm_password" required>
    <p ng-show="SignUp.password.$invalid 
                && (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 nx-equal="vm.password">
    <p ng-show="SignUp.confirm_password.$error.nxEqual
                && (SignUp.confirm_password.$dirty || vm.submitted)" 
       class="help-block ng-binding">Adgangskoderne er ikke ens.</p>
</div>

CSS

input.ng-dirty.ng-invalid {
    border-color: #a94442;
}

.ng-submitted input.ng-invalid {
    border-color: #a94442;
}

指令函数

function ComparePassword() {
return {
  require: 'ngModel',
  link: function (scope, elem, attrs, model) {
    if (!attrs.nxEqual) {
      console.error('nxEqual expects a model as an argument!');
      return;
    }
    scope.$watch(attrs.nxEqual, function (value) {
      model.$setValidity('nxEqual', value === model.$viewValue);
    });
    model.$parsers.push(function (value) {
      var isValid = value === scope.$eval(attrs.nxEqual);
      model.$setValidity('nxEqual', isValid);
      return isValid ? value : undefined;
    });
  }
}
}

Answer 1

让比较指令观察其他字段:

app.directve("compareTo", compareTo);

function compareTo() {
  return {
      require: "ngModel",
      link: function(scope, elem, attrs, ngModel) {

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

        scope.$watch(attrs.compareTo, function() {
          ngModel.$validate();
        });
      }
  };
}

用法:

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

<div ng-show="form1.comfirmPassword.$error.compareTo">
   Error: Password entries must match
</div>

---

仔细考虑复式输入

Double entry:

• increases the workload for every single user;
• can be bypassed by copying and pasting, or automatic form-filling tools;
• only ensures the two fields match, not that they contain the valid information;
• and may be seen as belittling the user;

Alternatives to double entry are worth serious consideration. These alternatives include authentication and/or simple methods of reset or recovery.

— Formulate Information Design Blog - Double entry of form fields