如何使用Angular.js验证输入类型单选按钮

时间:2015-12-31 07:18:46

标签: javascript angularjs

我需要使用Angular.js验证我的单选按钮字段。让我用下面的代码解释。

<form name="myForm"  enctype="multipart/form-data" novalidate>
<div>
<input type="radio"  ng-model="new" value="true" ng-required="!new"> new 
<input type="radio"  ng-model="new" value="false" ng-required="!new">Old
</div> 
<input type="button" class="btn btn-success" ng-click="addData(myForm);"  value="Add" ng-show="myForm.$valid"/>
</form>

这里我需要当用户没有选择任何单选按钮时,添加按钮不应该对用户可见。我做了一些编码,但它不会发生这种情况。请帮助我。

1 个答案:

答案 0 :(得分:1)

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


app.controller('MyCtrl', ['$scope', function ($scope) {
    $scope.people = [{
        name: "John"
    }, {
        name: "Paul"
    }, {
        name: "George"
    }, {
        name: "Ringo"
    }];
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form name="myForm" ng-app="myApp" ng-controller="MyCtrl">
    <p>Favorite Beatle</p>
    <ul>
        <li ng-repeat="person in people">
            <label>{{person.name}}
                <input type="radio" ng-model="$parent.name" name="name" value="{{person.name}}" required />
            </label>
        </li>
    </ul>
    <p><tt>myForm.$invalid: {{myForm.$invalid}}</tt></p>
    <button ng-disabled="myForm.$invalid">Submit</button>
</form>