Question

我尝试创建一个在选中单选按钮时有效的表单。单选按钮是组的一部分，用户可以从中选择一个。我使用控制器中的函数将required属性分配给单选按钮，这似乎导致了验证问题。我认为这是一些范围问题，但我无法弄清楚。

这是一个显示问题的方法：http://jsfiddle.net/flyingL123/x27nv8fq/5/

您可以看到无线电输入正确分配了required属性，但即使用户没有选择选项，表单仍会验证并提交。

这是HTML：

<div ng-app="test" ng-controller="TestController">
    <form name="testForm" ng-submit="testForm.$valid && submitForm()" novalidate>
        <div ng-repeat="option in options">
            <input type="radio" name="testInput" 
                ng-value="option" 
                ng-model="$parent.selectedOption" 
                ng-required="required()" />
            {{ option.value }}
        </div>
        <button type="submit">Submit</button>
        <p ng-show="testForm.testInput.$invalid">Form is invalid</p>
        {{ selectedOption }}
    </form>
</div>

和JS：

var test = angular.module('test', []);

test.controller('TestController', ['$scope', function($scope){
    $scope.options = [{id: '0', value: 'blue'}, {id: 1, value: 'green'}]
    $scope.selectedOption = {};

    $scope.submitForm = function(){
         alert('Form valid and submitted');   
    }

    $scope.required = function(){
        if(!$scope.selectedOption.id){
            return true;   
        }

        return false;
    }
}]);

为什么即使未选择required无线电输入，表单也会被视为有效？

Answer 1

我注意到有两个问题：

1）$ scope.selectedOption（正如你所提到的） 2）据我所知，$ scope.required函数是不必要的。您应该在这些输入上将required设置为true - Angular通过name属性知道只需要检查其中一个输入。

你可以在这里看到它 - http://jsfiddle.net/x27nv8fq/6/

HTML

<div ng-app="test" ng-controller="TestController">
    <form name="testForm" ng-submit="testForm.$valid && submitForm()" novalidate>
        <div ng-repeat="option in options">
            <input type="radio" name="testInput" 
                ng-value="option" 
                ng-model="selectedOption" 
                ng-required="true" />
            {{ option.value }}
        </div>
        <button type="submit">Submit</button>
        <p ng-show="testForm.testInput.$invalid">Form is invalid</p>
        {{ selectedOption }}
    </form>
</div>

的Javascript

var test = angular.module('test', []);

test.controller('TestController', ['$scope', function($scope){
    $scope.options = [{id: '0', value: 'blue'}, {id: 1, value: 'green'}]
    $scope.selectedOption;

    $scope.submitForm = function(){
         alert('Form valid and submitted');   
    }
}]);

Answer 2

看起来我的问题是我将$scope.selectedOption初始化为{}而不是将其保留为未定义。我猜测，因为空对象是＆＃34; truthy＆＃34;，Angular认为它有效。从代码中删除这似乎已经解决了问题。

ng-repeat中的角度无线电验证

2 个答案: