从角指令修改单选按钮有效性

Question

当用户开始填写输入时，我使用一个角指令来更改表单的输入有效性：

angular.module('core').directive('serverError', function() {
  return {
    restrict: 'A',
    require: '?ngModel',
    link: function(scope, element, attrs, ctrl) {
      element.on('input', function() {
        scope.$apply(function() {
          ctrl.$setValidity('server', true);
        });
      });
      element.on('change', function() {
        scope.$apply(function() {
          ctrl.$setValidity('server', true);
        });
      });
    }
  };
});

我的表格是：

<input type="text" data-ng-model="request.lastname" name="lastname" required server-error/>
<div ng-show="form.lastname.$error.server">
    <span>Please fill this field</span>
</div>

<input type="radio" data-ng-model="request.civility" name="civility" value="M" required server-error> M.
<input type="radio" data-ng-model="request.civility" name="civility" value="F" required server-error> Mme
<input type="radio" data-ng-model="request.civility" name="civility" value="MISS" required server-error> Mlle
<div ng-show="form.civility.$error.server">
  <span>Please fill this field</span>
</div>

它对文本输入是正确的，但对于单选按钮却不起作用。只有最后一个单选按钮按预期工作，并使错误消失。

有什么办法解决这个问题吗？

谢谢。

Answer 1

不幸的是，当使用ng模型的控件向表单注册时，它将使用输入的名称将注册为表单的属性。

在您的示例中，所有3个单选按钮都使用相同的名称(礼貌) => --第一个收音机被第二个输入覆盖，第二个输入被第三个输入覆盖。

尝试使用不同的名称来解决您的无线电输入：

<input type="radio" data-ng-model="request.civility" name="civility1" value="M" required server-error>M.
<input type="radio" data-ng-model="request.civility" name="civility2" value="F" required server-error>Mme
<input type="radio" data-ng-model="request.civility" name="civility3" value="MISS" required server-error>Mlle
<div ng-show="form.civility1.$error.server && form.civility2.$error.server && form.civility3.$error.server">
    <span>Please fill this field</span>
</div>

演示

Answer 2

由于每个无线电组都有不同的名称，使得自动填充表单不可用，因此有一个更好的解决办法：

基本上，您必须使用angulars获取NgModelController。

使用如下所示的指令(我没有测试该代码)：

angular.module('core').directive('serverError', function() {
    return {
        restrict: 'A',
        require: '?ngModel',
        link: function(scope, element, attrs, ctrl) {
            function updateValidity() {
                const ngModelCtrl = element.controller('ngModel');
                if (ngModelCtrl) {
                    ngModelCtrl.$setValidity('server', true);
                }
            }

            element.on('input', updateValidity);
            element.on('change', updateValidity);
        }
    };
});

在试图评估来自服务器的验证响应并试图从那里设置有效性之后，我也遇到了同样的问题。

我没有使用指令。我以前尝试使用组件FormController (类似于formCtrl[inputName].$setValidity(...) )来设置有效性，但最终得到的行为与问题中描述的完全相同。

因此，我不得不将它更改为这个(测试和工作)：

function updateValidity(control) {
    // `control` resembles `formCtrl[inputName]` as a parameter
    angular.element('input[name="' + control.$name + '"]').each((i, elem) => {
        const ngModelCtrl = angular.element(elem).data().$ngModelController;
        if (ngModelCtrl) {
            ngModelCtrl.$setValidity('server', true);
        }
    });
}