Verification of Radiobox Groups in AngularJS

Could you please help me with validating a radiogroup using AngularJS, which is instantiated within an additional directive?

The validation requirement is that the User must not be able to submit unless one of the radio buttons has been selected.

This is how I have set it up:

HTML document :

<ng-form name="salutationgroup">
      <radiotrigger model="mrms" name="gender" value='1' label="mr" ></radiotrigger>
      <radiotrigger model="mrms" name="gender" value='2' label="ms" ></radiotrigger>
</ng-form>

JS document:

Directives.directive('radiotrigger', function() {
    return {
        restrict: 'E',
        scope: {},
        compile: function(element, attrs) {
            var templateText = '<li><label><input type="radio" ng-model="' + 
                    attrs.model + '" value="' + 
                    attrs.value + '">' +
                    attrs.label + '</label></li>';

            element.replaceWith(templateText);
        }
    };
});

Thank you for your assistance.

Answer №1

Here is one approach:

Using HTML tags

<ng-form name="greetingsform">
    <radiocontrol model="hello" name="salutation" value='1' label="hi"></radiocontrol>
    <radiocontrol model="hello" name="salutation" value='2' label="hey"></radiocontrol>
    <input type="submit" ng-disabled="!valid"></input>
</ng-form>

Custom Directive (Pay attention to 'ng-change="valid=true"'):

Directives.directive('radiocontrol', function() {
    return {
        restrict: 'E',
        scope: {},
        compile: function(element, attributes) {
            var newTemplate = '<li><label><input type="radio" ng-model="' + 
                    attributes.model + '" value="' + 
                    attributes.value + '" ng-change="valid=true">' +
                    attributes.label + '</label></li>';

            element.replaceWith(newTemplate);
        }
    };
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The Angular 1.x Ajax request is not triggering the expected update in the view

I am encountering an issue with my Angular application where the data retrieved from a JSON file is not updating in the view when the JSON file is updated. It seems like the JSON file and the view are out of sync. As a newcomer to Angular, I am struggling ...

Guide to utilizing JavaScript and JQuery for retrieving a PDF from a specific URL and subsequently uploading the file to another website

I have a link to a PDF file: http://www.example.com/HelloWorld.pdf My objective is to download the file using JavaScript/JQuery/AJAX and temporarily store it in the browser, without saving it on the user's machine. Then, I want to POST it to . To ac ...

The dojo array implemented a new element, pushing out the old one

The JavaScript code below is supposed to populate the array personNames with objects containing names from an array of persons. However, it incorrectly repeats the same name for each object instead of assigning different names: [{"name":"smith"},{"name":" ...

Express/NodeJS encountering a CORS problem, causing services to be inaccessible in Internet Explorer

Currently, I am working on a REST-based service implemented in Express/NodeJS. The code includes CORS (Cross Origin Resource Sharing) implementation to allow services to be consumed from browsers like Chrome and Firefox. However, there seems to be an issue ...

Halting a function within a specific namespace

Is there a way to prevent certain characters from being entered during a keypress event for inputs when using a namespace in JavaScript? I noticed that even if the function returns false when the character is detected, the character still gets entered. How ...

Lottie-web experiences a memory leak

Currently implementing lottie web on my front-end, but encountering persistent memory leaks. The JavaScript VM instance remains below 10MB when lottie is removed altogether. However, upon enabling lottie, the memory usage escalates rapidly whenever the pa ...

JavaScript providing inaccurate height measurement for an element

Upon loading the page, I am trying to store the height of an element. To achieve this, I have utilized the jQuery "ready" function to establish a callback: var h_top; var h_what; var h_nav; $(".people").ready(function() { h_top = $(".to ...

The Axios post request is mistakenly sending my data as the key with an empty value instead of sending the entire data object itself

I began by developing the frontend, but now I am looking to create the backend in order to establish a connection with a database. const express = require("express"); const bodyParser = require("body-parser"); const cors = require(" ...

Transforming a namespaced function into an asynchronous operation by utilizing setTimeout

Looking for help with making a function that uses namespaces asynchronous. The function is currently being called on the click of a button. var ns = { somemfunc: function (data) { alert("hello"); } } Edit: ...

Verify the changing text within a Span tag with the use of Selenium in Java

Can anyone assist me in creating a logic to verify a dynamic text? The text within the tag below is constantly changing (to 6 distinct words), and I need to validate if those 6 unique words match the expected text. Is there a method to do this verification ...

Utilizing Conditional Styling for an Array of Objects within a Textarea in Angular 6

My array contains objects structured as follows: list =[ { name:"name1", value:true } { name:"name2", value:false } { name:"name3", value:true } { name:"name4", value:false ...

Guide on printing in an Ionic application using print.js without the need to open the printer setup page

Our team is currently working on an Ionic web application that utilizes printer functionality. To enable printing, we have integrated the Print.js npm package. However, when we initiate the print method, a setup page displaying details such as printer na ...

Different option for key press identification

My JavaScript skills are still at a beginner level and I've come across a bug that's causing me trouble. The issue is with keyCode not working on mobile devices (Chrome). It seems that mobile devices do not support keyCode. I think I could use ...

How to locate the index.js file within my application using Node.js?

Directory Structure bin - main.js lib - javascript files... models - javascript files... node_modules - folders and files public - index.html route - javascript files... index.js package.json I am using Express and angular.js. The ser ...

Discover how to achieve the detail page view in Vue Js by clicking on an input field

I'm a beginner with Vuejs and I'm trying to display the detail page view when I click on an input field. <div class="form-group row"> <label for="name" class="col-sm-2 col-form-label">Name</label> ...

What could be causing the consistent Mocha "timeout error" I keep encountering? Additionally, why does Node keep prompting me to resolve my promise?

I'm encountering a timeout error repeatedly, even though I have called done(). const mocha = require('mocha'); const assert = require('assert'); const Student = require('../models/student.js'); describe('CRUD Tes ...

Issue with Ajax not sending query string to ASP.NET controller

I am currently working with an Ajax function that serializes data sent from my view into a query string. Here is the code snippet: UpdateFIConfig: function ($appForm) { var valid = $appForm.valid(); //if not valid the validate plugin will take ca ...

React form input values fail to refresh upon submission

After attempting to upload the form using React, I noticed that the states are not updating properly. They seem to update momentarily before reverting back to their original values. I am unsure of why this is happening. Take a look at this gif demonstrati ...

Is there a way to verify the presence of a service worker on a specific URL?

Is there a way for me to determine if external websites have a 'service-worker' or not? Here is what I think could work: Extract all the JavaScript files from the given URL Look for the string 'sw.js' (I am not entirely sure how to ...

The database server is not appearing on the main.js page of the client

My client's main.js file contains code that is meant to display previous form entries on the webpage, but after submitting the form, no entries appear on the HTML page. My server is running on port 7777 and the root route works in Postman, as does the ...