"Placing an ng-form within an ng-repeat loop, with the submit button located outside of

Here is the code that I am working with:

 <div class="row" ng-repeat="input in inputs | filter:inputNumber">
     <ng-form name="form1">
       <div class="col-xs-3">
            <div class="form-group">
                 <input ng-model="inputs.number[$index]" type="number" name="number$index" class="form-control" placeholder="" min="1" max="9999" required />
                     <small class="label label-danger" data-ng-show="submitted && form1.number$index.$error.required">required</small>
                     <small class="label label-danger" data-ng-show="submitted && form1.number$index.$error.number">number</small>
                     <small class="label label-danger" data-ng-show="submitted && form1.number$index.$error.max">number max</small>
            </div>
        </div>
      </ng-form>
  </div>

 <button data-ng-click="add(form1)" class="btn-add" style="padding-left: 40%;"></button>

This is the controller function:

// Form add handler.
$scope.add = function(form) {
    // Trigger validation flag.
    $scope.submitted = true;

    // If form is invalid, return and let AngularJS show validation errors.
    if (form.$invalid) {
        console.log('invalid');
        return;
    } else {
        var newItemNo = $scope.inputs.length + 1;
        var inputs = { 'id': 'input' + newItemNo }
        $scope.inputs.push(inputs);
        $scope.isDisabled = false;
    }
};

I am facing an issue where I can only validate the form inputs within the ng-repeat and ng-form blocks. However, I need to trigger the event outside of this HTML block. This is my first time using angular1 validations and any help would be highly appreciated. Thank you in advance.

Answer №1

After reviewing your feedback and aiming for the same objective of creating a form for each item in your ng-repeat loop, here is the suggested solution:

HTML

<form name="generalForm"> <!-- This form will be considered valid if all sub-forms are valid-->
 <div class="row" ng-repeat="input in inputs | filter:inputNumber">
     <ng-form name="form1">
       <div class="col-xs-3">
            <div class="form-group">
                 <input ng-model="inputs.number[$index]" type="number" name="number$index" class="form-control" placeholder="" min="1" max="9999" required />
                     <small class="label label-danger" data-ng-show="submitted && form1.number$index.$error.required">required</small>
                     <small class="label label-danger" data-ng-show="submitted && form1.number$index.$error.number">number</small>
                     <small class="label label-danger" data-ng-show="submitted && form1.number$index.$error.max">number max</small>
            </div>
        </div>
      </ng-form>
  </div>

 <button data-ng-click="add(generalForm)" class="btn-add" style="padding-left: 40%;"></button>
</form>

Controller

// Function to handle adding forms.
$scope.add = function(form) {
    // Set validation flag to true.
    $scope.submitted = true;

    // If the form is invalid, display any validation errors from AngularJS.
    if (form.$invalid) {
        console.log('invalid');
        return;
    } else {
        var newItemNo = $scope.inputs.length + 1;
        var inputs = { 'id': 'input' + newItemNo }
        $scope.inputs.push(inputs);
        $scope.isDisabled = false;
    }
};

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

What could be preventing me from typing in the input field that's linked to an Angular model in Firefox browser?

Having trouble entering text in input on Firefox, even though it works fine on Chrome. No CSS issues or jQuery used. Here is my HTML code: <div class="todo_content" style="width:66%"> <input class="todo_add_input" autofocus="autofocus" ...

Is there a way to use lodash to convert an array into an object?

Below is an array that I am working with: const arr = [ 'type=A', 'day=45' ]; const trans = { 'type': 'A', 'day': 45 } I would appreciate it if you could suggest the simplest and most efficient method to ...

Coordinating a series of maneuvers

When it comes to coordinating multiple sequential actions in Redux, I find it a bit confusing. I have an application with a summary panel on the left and a CRUD panel on the right. My goal is to have the app automatically update the summary after a CRUD op ...

Using Three.js BVHLoader in React/React Native applications

I am currently working on developing an application or website for displaying BVH animation. I came across a BVHLoader example in Three.js that I found interesting: BVHLoader example. I am aware that React and React Native can be used with Three.js as we ...

What could be the reason for this code not waiting for module imports?

Currently, I am facing an issue with dynamically importing modules in a nodejs server running in the development environment. To achieve this, I have implemented an immediately-invoked async function which, in theory, should work perfectly. However, it see ...

Tips for modifying HTML attributes in AngularJS

I am looking to modify an attribute of a div using AngularJS. While I am familiar with how to do this in jQuery, I am not sure how to achieve it in Angular. Here is the HTML code: <div ng-app="test"> <div ng-controller="cont"> < ...

Encountering issues with pipes and ngModel functionality in Angular causing errors

I have a unique custom dropdown feature that binds the selected dropdown value to an input field in my reactive form using ngModel. I have also implemented a mask on the input fields using a pipe. Here is all the relevant code for this functionality: HTML ...

Automatically populate the options of a dropdown menu using jQuery

I am a beginner in the world of Javascript, JSON, and jQuery. I am seeking some guidance as I navigate through this new territory. On my JSP page, there is a drop down list that needs to be populated with content when the page loads. To achieve this, I hav ...

Retrieve all links with the class "execute" and list them below

Looking to extract links that start with <a class="execute" href=" from https://bitbucket.org/alceawisteria/ostr/issues and then showcase them below in the existing HTML document. Can this be achieved using JavaScript? (If not, what ...

Enhanced Client Side Validation Leads to Successful Submission and Double Record Addition in Yii

One of the challenges I am facing involves a simple form in Yii that is submitted via AJAX: <?php $form = $this->beginWidget('CActiveForm', array( 'id' => 'application-form', 'enableAjaxValidatio ...

Issue with Material UI Textfield error functionality in React.js not functioning correctly

Currently, I am working on a functional component in combination with Material UI. Within this setup, I have constructed a form comprising of 2 textfields. My objective is to activate the error property solely under certain conditions being met. However, t ...

When using jQuery to submit a form, the page is refreshed rather than actually submitting

I created a script to submit a form with a delay: $(document).ready(function () { $('#form-submit').on('click', function (event) { event.preventDefault(); // event.stopPropagation(); $('#big-dots-loade ...

Creating a new table based on an if statement from an HTML table index value of x

Hey everyone, I could really use your assistance. I've been attempting to create an if statement based on the values in my HTML table's index-x (where x represents the column index). I've successfully managed to convert the table into an arr ...

Unable to interpret data from JSON file

I have written the following code to read a JSON file. It is not throwing any errors, but I am receiving a null value in the variable: var myData = null; $.ajax({ type: 'GET', async: false, url: 'myJson.json', dataType: ...

What is the process for changing the behavior when the checkbox is selected or deselected?

Hello everyone. I'm facing a challenge that I can't seem to overcome. I'm trying to adjust the behavior of an element using the ".on/.off" methods based on whether a checkbox is ticked or not. Can someone provide some guidance on how to achi ...

JavaScript error: Cannot use `.splice()` on [array] ("Uncaught TypeError: collisions.splice is not a function")

Struggling to remove specific items from an array in javascript, the [array].splice function seems to be causing issues. This piece of code is designed to detect collisions between SVG objects (for a game). The goal is to eliminate 3 objects that the pl ...

Is it advisable to implement the modular pattern when creating a Node.js module?

These days, it's quite common to utilize the modular pattern when coding in JavaScript for web development. However, I've noticed that nodejs modules distributed on npm often do not follow this approach. Is there a specific reason why nodejs diff ...

v-treeview component triggering method execution twice upon input

I'm facing an issue with my Vue component that contains a treeview. Upon selecting a node, the goal is to update an array and display the checkbox as selected. However, I'm encountering a problem where if I select elements from one folder in the ...

Tips for utilizing React.GA.plugin.require with multiple trackers:

Can you help me figure out how to enable the ecommerce plugin with multiple trackers using the react-ga package? This is the code I've been using to initialize the trackers: const initTracker = (trackerId, name) => ({ trackingId: trackerId, g ...

When attempting to remove an object from the scene, an error occurs stating that children[i]

Is there a way to remove an object from the scene? removeObjectFromScene = (position) => { this.scene.traverse((child) => { if (child.isGroup && child.userData.position) { if (child.userData.position.equals(position)) ...