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

【问题标题】：Angular radio validation in ng-repeatng-repeat 中的角度无线电验证
【发布时间】：2015-01-03 07:59:43
【问题描述】：

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

这是一个显示问题的 jsfiddle：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 单选输入，表单仍被视为有效？

【问题讨论】：

标签： javascript angularjs validation

【解决方案1】：

我注意到了 2 个问题：

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

您可以在这里看到它的实际效果 - 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');   
    }
}]);

【讨论】：

【解决方案2】：

看起来问题是我将$scope.selectedOption 初始化为{}，而不是让它未定义。我猜由于空对象是“真实的”，Angular 认为它是有效的。从代码中删除这个似乎已经解决了这个问题。

【讨论】：