Angularjs setValidity导致modelValue不更新

发布时间：2020-12-17 07:57:20 所属栏目：安全来源：网络整理

导读：我在使用表单时遇到了一些基本问题.这就是我做的. 我从这里抓住这个看起来很酷的指令：https://github.com/TheSharpieOne/angular-input-match 它看起来像这样： directive('match',function () { return { require: 'ngModel',restrict: 'A',scope: { match

我在使用表单时遇到了一些基本问题.这就是我做的.

我从这里抓住这个看起来很酷的指令：https://github.com/TheSharpieOne/angular-input-match

它看起来像这样：

directive('match',function () {
    return {
      require: 'ngModel',restrict: 'A',scope: {
        match: '='
      },link: function(scope,elem,attrs,ngModel) {
        scope.$watch(function() {
          return (ngModel.$pristine && angular.isUndefined(ngModel.$modelValue)) || scope.match === ngModel.$viewValue;
        },function(currentValue,previousValue) {
          ngModel.$setValidity('match',currentValue);
        });
      }
    };
  });

本质上,该指令监视它附加到模型值的元素,并将其与match属性中的模型值进行比较.

所以…例如,下面我们正在观察两个密码是否匹配：

Password: <input ng-model="password" type="password" />
Confirm: <input ng-model="passwordConfirm" type="password" match="password" />

该指令似乎正在起作用,因为它适当地设置了ng-valid-match和ng-invalid-match.

但是,一旦将其设置为无效,passwordConfirm模型将永远不会再次更新.我已经完成了大量的console.loggin,在指令中查看ngModel,这是两个密码匹配时的样子：

Constructor {$viewValue: "asdf",$modelValue: undefined,$validators: Object,$parsers: Array[0],$formatters: Array[0]…}
$$debounceViewValueCommit: function (trigger,revalidate) {
$$invalidModelValue: "asdf"
$$lastCommittedViewValue: "asdf"
$$runValidators: function (modelValue,viewValue) {
$$validityState: ValidityState
$$writeModelToScope: function () {
$commitViewValue: function (revalidate) {
$dirty: true
$error: Object
$formatters: Array[0]
$invalid: false
$isEmpty: function (value) {
$modelValue: undefined
$name: "passwordConfirmation"
$parsers: Array[0]
$pristine: false
$render: function () {
$rollbackViewValue: function () {
$setPristine: function () {
$setTouched: function () {
$setUntouched: function () {
$setValidity: function (validationErrorKey,isValid) {
$setViewValue: function (value,trigger,revalidate) {
$touched: true
$untouched: false
$valid: true
$validate: function () {
$validators: Object
$viewChangeListeners: Array[0]
$viewValue: "asdf"
__proto__: Object

请注意$viewValue是正确的,但$modelValue列为undefined,$invalidModelValue仍然有值.

这两个密码匹配时,这就是html的样子：

<input type="password" class="form-control ng-isolate-scope ng-dirty ng-valid-required ng-valid ng-valid-match ng-touched" id="passwordConfirmation" name="passwordConfirmation" placeholder="Confirm your password" ng-model="passwordConfirmation" required="" match="password" style="">

我错过了某个地方的东西吗？我已经圈了几个小时.

在 recent update中,根据字段的有效性对$modelValue的填充方式进行了更改.如果该字段无效,则$modelValue将设置为undefined,并且将使用该值填充新属性$$invalidModelValue.

作为使用1.2.*和1.3.*的解决方案,我想出了这个：

.directive('match',function () {
    return {
        require: 'ngModel',scope: {
            match: '='
        },ctrl) {
            scope.$watch(function() {
                modelValue = ctrl.$modelValue || ctrl.$$invalidModelValue;
                return (ctrl.$pristine && angular.isUndefined(modelValue)) || scope.match === modelValue;
            },function(currentValue) {
                ctrl.$setValidity('match',currentValue);
            });
        }
    };
});

Plunkr

虽然此解决方案适用于两个版本,但1.3.*具有新的$validators管道,建议用于新版本.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!