Email validation in AngularJS with dynamically named input fields

In my AngularJS code snippet below, I am validating email input within an ng-repeat loop and associating it with a specific individual using 'data.affiliateSelect.customer_no'.

To ensure unique names for each email input field, I am appending the customer_no to the name attribute. However, I am facing difficulties referencing this dynamically generated name in the span.error-msg ngShow expression. Can anyone provide guidance on how to achieve this?

Thank you in advance.

<form name="registrantForm" ng-submit="submitRegistrantForm()" novalidate>    
<div class="session-registrant-field field-email" ng-if="data.affiliateSelect.ask_email == 'Y'">
   <label for="">Email
      <span class="error-msg" ng-show="registrantForm.$submitted || registrantForm.(email+'-'+data.affiliateSelect.customer_no).$touched">
      <span ng-show="registrantForm.(email+'-'+data.affiliateSelect.customer_no).$error.required">Please provide your email.</span>
      <span ng-show="registrantForm.(email+'-'+data.affiliateSelect.customer_no).$error.email">Please enter a valid email.</span>
      </span>
   </label>
   <input type="email" name="email-{{data.affiliateSelect.customer_no}}" id="email-{{data.affiliateSelect.customer_no}}" value"" ng-model="affiliateEmail" required>          
</div>
</form>

Answer №1

registrantForm['email-' + cartPerf.perf_no + data.affiliateSelect.customer_no].$error.required

After much trial and error, I finally discovered the correct syntax required to make this function properly.

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 data passed into the child component via Input() retains its original value even after being modified within the child

While passing an object containing data length and an array of objects to a child component, I noticed a strange behavior. Even after changing the data in the child component and reloading the page, the edited property still persists. To visualize this is ...

Issue saving JSON data following AJAX call using jQuery

As a newcomer to JavaScript/jQuery, I am seeking assistance with storing the JSON data received after making an AJAX request. When attempting to access the resulting JSON for later use in my program, I encounter an error indicating that "Data" is undefined ...

Find the mean of two values entered by the user using JavaScript

I'm sorry for asking such a basic question, but I've been struggling to get this code to work for quite some time now. I'm ashamed to admit how long I've spent trying to figure it out and how many related StackOverflow questions I ...

Vue's TreeView component has been encountering issues with accurately displaying the contents of sub

Currently working on creating a customized TreeView in Vue. Check out my progress in the code here. The issue I'm facing is that the subfolders' content (such as child folder 1) is not displaying correctly. Additionally, collapsing the subfolder ...

Error code 12004 encountered during the execution of a service request

While working on a service call in my JavaScript code that retrieves XML data using XMLHttpRequest, everything runs smoothly in Chrome and Firefox, successfully fetching the data over HTTPS. However, when attempting to execute the same code in IE11, it ret ...

What is preventing me from deleting a user object in this manner?

Hey everyone! I'm new to ReactJS and I've been working on some basic projects to grasp the fundamentals. One project I started involves adding and deleting users from a list using React Hooks to manipulate the state. Adding a new user and displ ...

Using Express to route requests and removing the # from Angular URLs

I have made adjustments in my front-end code to remove the '#' from Angular URLs by using: $locationProvider.html5Mode(true); <base href="/*"> in my view file. However, when I refresh the page, I encounter a "url not found" error even th ...

Maintaining the sequence of a PHP associative array when transferring it to JavaScript via ajax

Below is the code from my PHP file: GetUserArray.php $Users = array('7'=>'samei', '4'=>"chaya", '10'=>'abetterchutia'); echo json_encode($Users); Here is the AJAX request I am using: $.ajax({ ...

Troubleshooting Issue with Jquery Ajax Success Event and Retrieving Response Message

I've encountered a problem while calling the jQuery Ajax function. It seems to be working fine, except for the fact that it's not receiving any response and appending it in. Upon submitting the form, the beforeSend event is triggered successfull ...

Serverless Functions in ZEIT Now - Customizing Routes with Parameters

I successfully implemented 4 serverless routes /api/list (GET) /api/add (POST) /api/update/:id (PUT) /api/remove/:id (DELETE) These routes were added to the api/now.json file in the following format: {"src": "/api/list", "dest": "./list.js", "methods": ...

Use middleware for multiple routes with just one call

I have an API for a dashboard which includes routes such as: /dashboardRoutes/getdata1 /dashboardRoutes/getdata2 . . . /dashboardRoutes/getdata7 On the backend, I am using express router.use to direct these routes to a handler. router.use('/dashboard ...

Update the image source when hovering over the parent element

Check out this snippet of HTML code: <div class="custom text-center threeBox ofsted"> <a class="ofsted" title="ofsted report" href="http://reports.ofsted.gov.uk/"> <img class="text-center ofstedLogo" src="images/ofsted_good_transparen ...

Unable to activate the onClick event

My Div element contains input and FontIcons as child elements. When I make changes in the input field and move the focus away, the onBlur event is triggered. However, when I try to click on the FontIcon, the intended click action does not work. After upda ...

passing arguments during deferred resolve() and when() operations

I am currently working on a flash card website and I need to determine the status of preloaded images once they have finished loading or if there was an error. After obtaining the status of each image, I will proceed with further actions. My code is inspi ...

Is it considered appropriate to initialize controllers in both the route as well as the body?

Many articles tend to focus on either specifying the controller in the route or in the body. Although I acknowledge the benefits of specifying the controller in the route when necessary (such as pre-loading required view resources), it seems unreasonable t ...

Loading will continue until the webpage has finished loading

I want to incorporate a loading animation into my webpage that will be displayed until all elements have finished loading. I attempted to create a popup alert using JavaScript <script type="text/javascript> window.onload = function() { a ...

Tips for implementing cloudinary jquery to showcase a positive outcome notification

I've been utilizing the cloudinary Upload widget to upload multiple images successfully. However, I'm encountering an issue where I can't display a success message after the process is completed. Below is the JavaScript code I am using for u ...

Increase express response.json functionality

Is it possible to customize the functionality of the res.json function? I am looking to implement some string replacements before the normal output is generated. I aim to utilize this for language translations. { value:'some key' } Input: { ...

The application of texture to a sphere in Next.js with Three.js seems to be malfunctioning

Hi there, I'm having some trouble getting a texture to apply correctly to a sphere within a Next.js component. I've attempted it with the code provided below, but all I see is a black ball rendering instead. I suspect it might have something to ...

Choose an option from the dropdown menu in the form

I am looking to design a form field with options that display additional fields when a specific option is chosen. <div class="col-md-12"> <label for="event" class="form-label" >Do you have more details about ...