Tips for checking the type radio button input with Angular.js

Question

Tips for checking the type radio button input with Angular.js

I want to implement validation for a radio button field using Angular.js. Below is the code snippet I am working with:

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

Currently, I'm facing an issue where the "Add" button is still visible even when the user has not selected any radio button. My attempts at resolving this have been unsuccessful. Any assistance on how to achieve this behavior would be greatly appreciated.

javascript angularjs

Answer 1

Answer №1

let application = angular.module('myApp', []);


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

Answer 2

let application = angular.module('myApp', []);


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

Tips for checking the type radio button input with Angular.js

Answer №1

Similar questions

I am looking to utilize React and Next.js to map my array from an object. The component is a function employing hooks

Exploring the interaction of karma, jasmine, Angular, and UI router through testing the resolve function when using state.go with parameters

Top Tips for Updating the CSS of a Nebular ngx-admin Component

Using jQuery to store the selection made in a select element option

Sending an Ajax request using a dropdown menu

Re-enable the jQuery-ui sortable feature after it has been turned off

The ExpressJS Req.method TypeError occurs when attempting to read the 'method' property of an undefined object

What is the method of displaying a querystring on my Angular view page without relying on a controller?

Ways to conceal a dynamically generated div upon page load?

Once a WordPress user includes a php file

Troubleshooting: jQuery's append function does not seem to be functioning properly when trying

The Node module's package.json does not have a main "exports" defined

Preventing a webpage's CSS from affecting an iframe loading an HTML document

Can a ListItem attribute be generated?

There was an error during product validation that occurred in the userId field. In the Node.js application, it is required to

Imagine a complex JSON structure with multiple levels of nesting

Animate a nested element dynamically with jQuery

Testing AngularJS 1.5 controller state changes using unit testing with UI-Router

What is the best way to position my Jchartfx area graph below my gridview?

Is it possible to resize AngularJS components to fit their parent elements