Retrieving the required Ng-checked checkbox (or radio button) in an ng-repeat loop within Angular framework

Looking for a way to validate a form that contains multiple radio checkboxes within an ng-repeat loop. How can I ensure the selected option is validated with the radio button input?
Validation outside of the ng-repeat loop is functioning properly. For example, when changing $index to customDish. The issue lies in validating inside the ng-repeat loop using $index.

The "Field Required" message should be displayed next to the selected radio button inside the ng-repeat loop.

Check out this Plunker example:

[http://plnkr.co/edit/j6bswtctD0ixaQmcDrp1?p=preview][1]

Your assistance would be greatly appreciated.
Thank you in advance

  [1]: http://plnkr.co/edit/j6bswtctD0ixaQmcDrp1?p=preview
javascriptangularjsvalidationindexingangularjs-ng-repeat

Answer №1

Take a look at how this differs from your ng-show:

ng-show="submitClicked && myOrderForm.dishQuantity.$error.required &&
($parent.checkboxSelection == $index)"

I have included an extra condition to make sure the error message appears only for the selected item.

Answer №2

New Solution

 <input ng-pattern="onlyNumbers" placeholder="quantity" ng-required="$parent.checkboxSelection === {{$index}}" name="dishQuantity{{$index}}" id="dishPrice" data-ng-model="dish.quantity" type="text" class="dish-quantity" id="dishQuantity" />

along with a span element

<span class="custom-label-danger" ng-show="submitClicked && myOrderForm.dishQuantity{{$index}}.$error.required ">Field Required</span>

This solution is also effective :)

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

Anchoring links on a webpage that provide users with a clear indication of their current position within the page

In the scenario of a single-page website with various sections (divs) and a header containing links to different anchors on the page, there is a desire to have an indicator highlight which anchor the user is currently viewing. An example of this can be s ...

javascriptcsshtmlhyperlink

Node package unable to undergo tree shaking process

My node module structure is similar to this: # color.js export var red = '#f00'; export var yellow = '#ff0'; export var blue = '#00f'; # images.js export var image1 = '<base64 string approximately ~ 500kb>&apos ...

javascriptnode.jsreactjs

Tips for sending variable from JavaScript to PHP Page through XMLHTTP

Make sure to review the description before flagging it as a duplicate. In my understanding, the method of transmitting data from JavaScript to PHP is through Ajax Call. This is the situation I am facing: With PHP, I bring forth an HTML page that cont ...

javascriptphpjqueryhtmlajax

How can I automatically copy a highlighted link in HTML?

I am attempting to implement a feature where users can click on a link and have it automatically copied. For example, I want it to appear like this: "UPI ID: david@okidfcbank". In this case, the link should be highlighted in blue. This is the code I have ...

javascripthtmlcssformshighlight

Show the dropdown menu with names from the array in the ajax response

<html> <select name="cars"> <option value="34">Volvo XC90</option> <option value="54">Saab 95</option> <option value="12">Mercedes SLK</option> <option value="10">Audi TT</option> </select> ...

javascriptphpajax

Why are the values in my options created using the array map method empty in React?

I decided to use a for loop to generate an array containing the numbers 1 through 12 representing each month. I then attempted to utilize the map array method to create 12 options, but unfortunately they are coming up empty. Below is a snippet of the ...

javascriptreactjsjsxhtml-selectarray-map

I am looking to initiate the animation by triggering the keyframe upon clicking a button

Is there a way to create an animation triggered by a button click instead of loading the page? Each table data cell has its own class with a unique keyframe defining the style changes over time. @-webkit-keyframes fadeIn { from { opacity:0; ...

javascripthtmlcss

What is the best way to retrieve the ajax response using Ajax.Responders in prototype.js?

I am looking to retrieve the response of each Ajax call within the function below Ajax.Responders.register({ onCreate: function() { }, onComplete: function(transport) { }, onSuccess: function(transport) { }, }); ...

javascriptprototypejs

Unable to transmit Props to Component - Fluctuating Behavior

I developed a React.js and Next.js application where I needed to pass the User object to all pages. My plan was to then pass this User component to the Head component in order to display different navigation options based on the user's role. Here is w ...

javascriptreactjsreact-routernext.js

Using JavaScript with Selenium, you can easily clear the input field and send

Here is a question input field. When clicked on, the h3 element with the name will disappear and the input tag will appear for entry of a new name. <td style="width:92%;"> <h3 id="question_tex ...

javascriptjavaselenium

Any ideas on how I can enable rotation of SVG images within a Bootstrap 4 Accordion card with just a click?

I'm working on a Bootstrap 4 accordion card that has an SVG arrow image in each header. I am trying to make the arrow rotate 180 degrees when the header is open, and return to its initial state when it is closed or another header is opened. Currently, ...

javascriptcssbootstrap-4accordionsvg-transforms

Angularjs drop-down menu changes images with animation

<body ng-controller="myCtrl"> <input type="checkbox" ng-model="loaded"/> <select ng-model="list"> <option ng-repeat="option in data.availableOptions" value="{{option.name}}">{{option.id}}</option> </select> {{list}} &l ...

javascriptjqueryhtmlcssangularjs

React Material-UI: Trouble with Checkbox Toggle

I'm encountering an issue with my React code where the checkbox is not toggling when clicked. Here is the link to the codesandbox: https://codesandbox.io/s/inspiring-kirch-q6p4h The checkbox state initialization looks like this: const [checkbox, set ...

javascriptreactjsmaterial-ui

What are some effective methods for incorporating large JSON data into a node.js script?

What is the best way to import a large JSON file (550MB) into a node.js script? I attempted: var json = require('./huge-data-set.json') The script was run with an increased --max-old-space-size parameter node --max-old-space-size=4096 diff.js ...

javascriptjsonnode.js

Timed up 10-second countdown with vue.js

<html> <head> <meta charset="utf-8" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" ></script> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> < ...

javascriptvue.js

Access account without providing all necessary identification documents

I'm currently facing an issue with my User Schema, as I initially defined 3 inputs for name, surname, and email. However, I now want to allow users to log in only with their email and password, without having to input their name and surname. How can I ...

javascriptexpresspassport.jsbackendpassport-local

Loop through an array in JavaScript to create properties for an object

When working with Vue, I encountered a prop that is actually an array containing multiple types of items. For each item in this array, I want to create a property in a specific object. For example, if the array includes methods and count, I aim to construc ...

javascriptvue.js

The MediaSource API is not supported on Chrome 27

My current browser version is Chrome 27, and based on this source, it is indicated that the MediaSource API comes pre-installed. However, upon further examination on the same page, the test section states that Your browser does not support the MediaSource ...

javascripthtmlhtml5-videowebrtcmedia-source

The inefficiency of invoking Jquery on elements that do not exist for the purpose of caching

What is the impact if JQuery attempts to access elements that do not exist? Will there be any significant CPU overhead other than script loading? Does it matter if this is done for a class or an id? For optimization purposes and to minimize simultaneous c ...

javascriptjqueryhtml

setTimeout executes twice, even if it is cleared beforehand

I have a collection of images stored in the img/ directory named 1-13.jpg. My goal is to iterate through these images using a loop. The #next_container element is designed to pause the loop if it has already started, change the src attribute to the next im ...

javascripthtmlsettimeout