Tips for implementing validation on dynamically inserted fields in a form

My form has two fields, and the submit button is disabled until those fields are filled with some text. However, if I add a third field dynamically using AngularJS, validation will not be supported for the new field.

Check out the example here


<button ng-click="adddynamicfield()">add dynamic field</button>
<form name="dynamicform" novalidate="true">
<input type ="text" dynamic-name name="name" ng-model="dynamicform1.name" required>
<input type ="text" dynamic-name name="age" class="age" ng-model="dynamicform1.age" required>
<button type="submit" ng-disabled="dynamicform.$invalid">submit</button>
</form>

Answer №1

The issue lies in not compiling the newly added html content. To resolve this, I suggest looking into using $compile.

For a more efficient solution in your scenario, I recommend utilizing an array to manage the dynamic fields. This will make accessing model values much simpler.

Check out this fiddle for reference

$scope.dynamicFields = [];

$scope.adddynamicfield = function() {
  var index = $scope.dynamicFields.length;
  $scope.dynamicFields.push({
    name: 'field' + index,
    model: '',
    className: 'field',
  });
}

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

Deciphering the difference between a null object and the numeral 0

While working on Codewars and attempting to solve a problem, I encountered an interesting question. The task was to create a "toDense()" function that takes a sparse array as input and returns the corresponding dense array. An example test case provided w ...

Ways to Determine if a User Has Closed the Page

How can I detect when a user closes the page without using the back button or typing in a different URL in the address bar? I've attempted to use the following code: $(window).bind('beforeunload', function () { logout(); }); This solutio ...

Avoiding Re-renders in an Angular2 Countdown Component

I am facing an issue with my Angular2 master component that includes multiple child components and a standalone countdown component called "clock". The countdown component updates its label every second, causing unnecessary re-rendering of the master compo ...

How can I transmit information using Json and javascript?

Is there a way to utilize Json to collect data upon button press? I have tried using Javascript to create a function for the button, but I am struggling with integrating Json. Can anyone provide an example of how to achieve this? Below is the HTML code sn ...

What is the best way to incorporate an ASYNC function within a .map function to dynamically populate a table in a REACT application?

I am attempting to use the .map() method in REACT to call an async function and populate table data cells. The async function communicates with the backend of my application using data from the array being looped through. When called correctly, the functi ...

Explore numerous databases using mongoosastic

Currently in my Node.js application, I am utilizing Mongoosastic to fetch data from ElasticSearch : Article.search({ "match_all": {} }, function (err, results) { console.log(results.hits.hits); Post.search({ "match_all": {} }, function (err, r ...

When attempting to insert data retrieved from axios into a table within a React component, the data is coming back as

Hi there! Currently, I'm in the process of developing an application that retrieves data from an API and my goal is to display it in a Material UI Table within a React environment. Strange issue I'm encountering: when I use console.log to check ...

In my React JS project, I am using an <Add /> component on two distinct pages. However, I am encountering an issue where only one of the pages is correctly receiving the add count prop

I could use some assistance in understanding why the logic for my counter button is not functioning properly on one specific instance. My aim is to have the count displayed by the counter look like this: https://i.sstatic.net/VdJ8o.png In order to add it ...

Issues occurred when attempting to access information with postgres and nodeJS

Below is the configuration I have set up in my files: const express = require('express') const app = express() const port = 8000 const expense_model = require('./expense_model') app.use(express.json()); app.us ...

Sending information in Json format back to an Ajax request

I have a method in the Model-View-Controller (MVC) framework where I submit data and expect to receive some processed data back. The MVC method I am posting to returns JSON data. [HttpPost] public JsonResult GetCalculateAmortizationSchedule() { var da ...

AngularJS ngTable Error Detected

When using ngTable (AngularJS) to display a list of elements, an error arises during compilation: ************ I am OK ****************** articles.client.controller.js:12 ReferenceError: articles is not defined at new (...../modules/articles/controlle ...

Concealing URL in client-side fetch request within Next.js

A contact form built in Next.js makes use of the FormSubmit API to send emails upon clicking the submit button. Below is the code for the onSubmit handler: const handleSubmit = async (e) => { e.preventDefault(); const res = await fetch("https:/ ...

Sharing data between app.js and client-side files in Node.js: How to do it effectively?

I have a question about passing a value from my Node.js app.js file to my client-side JavaScript file. Here is my app.js file: var express = require('express'); var app = express(); var port = process.en ...

Extract information from a webpage using Selenium WebDriver

Currently, I am working on mastering Selenium, but I have hit a roadblock that I need assistance with. My task is to gather all the betting information for games from the following link and store it into an array. Given my limited experience with HTML an ...

Refactor Print Preview Graph Display Issue within Nested Vue Component

I seem to be having trouble accessing this function properly due to an error. I am unsure of how to troubleshoot this issue and determine the correct solution. Any guidance would be greatly appreciated. The component PerformanceDonut.vue is located within ...

The ngMessage feature in Angular bootstrap ui tabs seems to be malfunctioning specifically within the initial tab

Encountered a peculiar issue with ngMessage While using angular ui bootstrap tabs, the validation is not functioning correctly in the first tab This is the code snippet js angular .module('app', ['ngMessages','ui.boots ...

Using Firebase callable functions with React Native

Can I use Firebase callable functions with React Native? I have successfully deployed an onCall function and it is visible in my dashboard. I have initialized the functions using: // Initialize Cloud Functions through Firebase firebase.functions(); The ...

VeeValidate fails to validate input fields in a form that is constantly changing

My goal is to create dynamic forms with validations using veeValidate in Vue.js. I am attempting to achieve this by storing an array of objects within the component's data. For instance: data(){ return{ inputs: [ { id: 1, lab ...

Ways to extract individual values from a Json Array and utilize them individually

I have a JSON data structure that I need to parse and separate each field into different arrays, so that I can use them individually. For instance, I want to split my data into two rooms: room 1 and room 2. After separating the data, I need to format it a ...

When attempting to extract values from selected items in Nextjs, clicking to handle them resulted in no action

I am facing an issue with my Nextjs project. I am trying to gather values from select items and combine them into a single object that needs to be processed by an API. However, when I click the select button, nothing happens. How can I resolve this issue? ...