在控制器上使用“$watch”时，为什么不更新此隐藏字段

Why is this hidden field not updated when `$watch` is used on the controller?

本文关键字：为什么不 更新 字段 隐藏 watch 控制器      更新时间：2023-09-26

我有这样的表格：

business-validation是一个自定义指令，其代码为：

var CREDIT_CARD_REGEX = /^'d{0,24}$/;
angular.module('directives').directive('creditCard', [
    function () {
        return {
            restrict: 'A',
            require: 'ngModel',
            link: function (scope, element, attrs, ctrl) {
                scope.$watch(attrs.creditCard, function (newValue) {
                    return ctrl.$setViewValue(ctrl.$viewValue);
                });
                return ctrl.$parsers.push(function (viewValue) {
                    var newValue;
                    newValue = ctrl.$modelValue;
                    element.validateCreditCard(function (result) {
                        if (result.card_type &&
                                result.luhn_valid &&
                                result.length_valid &&
                                CREDIT_CARD_REGEX.test(element.val())) {
                            element.attr("data-card-type", result.card_type.name);
                            ctrl.$setValidity('creditCard', true);
                            newValue = viewValue;
                        }
                        else {
                            element.removeAttr("data-card-type");
                            ctrl.$setValidity('creditCard', false);
                        }
                    }, { accept: ['visa', 'mastercard'] });
                    return newValue;
                });
            }
        };
    }]);

我需要控制器上myForm.anInputName.$error.creditCard的值，为此我做了一些尝试，还有一些类似的东西：

<input type="hidden" ng-model="IsCreditCardValid" name="IsCreditCardValid" value="myForm.anInputName.$error.creditCard" />

和

$scope.$watch("IsCreditCardValid", function (newValue, oldValue) {
    alert('theChangeHasBeen:' + oldValue + ' -> ' + newValue);
});

为了在控制器处$watch IsCreditCardValid。

本段显示：

<p class="help-block" ng-if="smyForm.anInputName.$error.creditCard && !myForm.anInputName.$error.required">Wrong credit card number!</p>

但是隐藏的输入即使使用相同的条件也永远不会得到期望的值。为什么最后一个隐藏字段没有更新，$watch也从未触发？

编辑
如果我这样做

myForm.anInputName.$valid:｛｛myForm.anputName.$invalid｝｝
该值会在屏幕上更新，但隐藏字段不会更改其值。

ngModel仅适用于列出的输入类型，而hidden不在其中。input指令的内部提示它不会自动处理所有可能的输入：

var inputType = {
  ...
  'hidden': noop,
  'button': noop,
  'submit': noop,
  'reset': noop,
  'file': noop
}

这是有道理的，因为隐藏的输入不需要双向绑定（在Angular应用程序中也没有必要）。如果你无论如何都想使用它们，那么

<input type="hidden" name="IsCreditCardValid" value="{{ IsCreditCardValid }}" />
相关文章：