编辑双重输入字段时更新 ng-invalid答案

【问题标题】：update ng-invalid when editing double entry fields编辑双重输入字段时更新 ng-invalid
【发布时间】：2017-11-26 03:10:26
【问题描述】：

我有一个密码和密码确认字段，使用指令连接。除此之外，我还有在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;
    });
  }
}
}

【问题讨论】：

注意指令中的两个字段
已添加指令功能，如果您对如何完成有任何建议
HTML 似乎有两个自定义指令：equals 和 nx-equals。 JS 有一个名为 ComparePassword 的指令函数，但 HTML 中没有 compare-password 属性。很难说什么与什么有关。

标签： css angularjs angularjs-directive

【解决方案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>

仔细考虑复式输入

双录：

增加每个用户的工作量；

可以通过复制和粘贴或自动填表工具绕过；

只确保两个字段匹配，而不是它们包含有效信息；

和可能会被视为贬低用户；

复式输入的替代方案值得认真考虑。这些替代方法包括身份验证和/或简单的重置或恢复方法。

— Formulate Information Design Blog - Double entry of form fields

【讨论】：