Question

我有一组单选按钮和一个表单中的文本输入。文本输入应用了一些取决于所选单选按钮的验证。

HTML：

<form name="myForm" novalidate>
    <div class="radio">
        <input type="radio" ng-model="myValue" name="radioGroup" value="1">1</input>
        <input type="radio" ng-model="myValue" name="radioGroup" value="2">2</input>
        <input type="radio" ng-model="myValue" name="radioGroup" value="3">3</input>
    </div>
    <div class="otherFormComponent">
        <input type="text" ng-model="myTextValue" name="textValue" special-validator></input>
    </div>
</form>

JS：

app.directive('specialValidator', function(){
    return{
        require: 'ngModel',
        link: function(scope, elm, attrs, ctrl){
            ctrl.$validators.specialValidator = function(modelValue, viewValue){
                //Do some validation
            };

            //Force validation when a radio button changes
            scope.myForm.radioGroup.$viewChangeListeners.push(function(){
                scope.myForm.textValue.$validate();
            });
        }
    };
});

不幸的是，只有在选择 last 单选按钮（3）时才会触发scope.myForm.textValue.$validate()代码。选择其他单选按钮不会触发添加到scope.myForm.radioGroup.$viewChangeListeners的方法。

如何设置单选按钮，以便更改任何单选按钮都会触发viewChangeListeners？

Answer 1

我已经得出结论，这必定是一个有角度的错误。这是我使用scope.$watch

的解决方法

<强> HTML

（在文本输入中添加了radio-group-model属性，该属性必须与验证所依赖的单选按钮组的ng-model值相同。）

<form name="myForm" novalidate>
    <div class="radio">
        <input type="radio" ng-model="myValue" name="radioGroup" value="1">1</input>
        <input type="radio" ng-model="myValue" name="radioGroup" value="2">2</input>
        <input type="radio" ng-model="myValue" name="radioGroup" value="3">3</input>
    </div>
    <div class="otherFormComponent">
        <input type="text" ng-model="myTextValue" name="textValue" special-validator
            radio-group-model="myValue"></input>
    </div>
</form>

<强> JS：

（使用scope.$watch而不是向radioGroup＆＃39; s viewChangeListeners添加功能。）

app.directive('specialValidator', function(){
    return{
        require: 'ngModel',
        link: function(scope, elm, attrs, ctrl){
            ctrl.$validators.specialValidator = function(modelValue, viewValue){
                //Do some validation
            };

            //Force validation when a radio button changes
            scope.$watch(attrs.radioGroupModel, function(value){
                scope.myForm.textValue.$validate();
            });
        }
    };
});

Answer 2

我将此错误报告给angular：https://github.com/angular/angular.js/issues/15696

他们建议对不同的输入使用不同的name属性。

只有最后一个单选按钮会触发$ viewChangeListener

2 个答案: