How to validate the input type radio button using Angular.js

Question

I need to validate my radio button field using Angular.js .Let me explain with my code below.

<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>

Here i need when user is not selecting any radio button the add button should not be visible to user.I did some coding but its not happening like that .Please help me.

Working example: plnkr.co/edit/hE2hVVmXsw6mCzcHZGqw?p=preview — Rayon
– Rayon, Commented Dec 31, 2015 at 7:23

Suresh B · Accepted Answer · 2015-12-31 07:25:10Z

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>

answered Dec 31, 2015 at 7:25

Suresh B

1,6521 gold badge18 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rayon Over a year ago

What does $parent do ? Will you mind explaining it a bit ? OP had static radio buttons, what is the point of using array and binding it in ng-repeat ?

Collectives™ on Stack Overflow

How to validate the input type radio button using Angular.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related