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

Access the current page's URL using JavaScript

Determine if a certain value is present in an array within an HTML document

Seeking a proficient Cloud Code specialist skilled in JavaScript, focused on managing installations and channels

Submit image and transfer it to server using AngularJS and Jersey

Unable to process form submission using Ajax in ASP.NET MVC

Display issue with TestResults in Protractor

What are the benefits of keeping JavaScript and HTML separate in web development?

The AJAX request to fetch XML data resulted in a failure to redirect as intended

Exploring Vue Component Features through Conditional Display

How can JavaScript be used to automatically send a user to a designated page based on a selected option in

Optimizing the JSON date structure

Encountering a snag while setting up Google authentication on my website

Observing mutations in HTML templates with MutationObserver

Can a menu with data-toggle='dropdown' remain visible even after clicking on it?

Employing angularjs alongside a static jsonp file produces results on the first attempt

Using Node.js to Insert Data into MySQL

Disable all components on the web page using the Wicket DisableComponentListener

Retrieve data from a text file using ajax and then return the string to an HTML document

Converting hierarchical JSON data into a table with rowspan using Angular

Converting an array of objects into an array of Objects containing both individual objects and arrays