Creating dynamic forms using AngularJS and the ng-repeat directive

Question

Creating dynamic forms using AngularJS and the ng-repeat directive

i am working with AngularJS dynamic forms . According to my userid value i generated multiple form field with same model name using ng-repeat. i am not able to get this input model values due to this ng-repeat. in this example i am using static userid data.

<div ng-app="myApp">
<div ng-controller="myCtrl">
    <form role="form" name='userForm' novalidate>
        <div class="container">
            <div class="row" ng-repeat="myid in userid">
                <div class="form-group">
                    <div class="col-md-3">
                        <label>ID</label>

Let's shift our focus to the JavaScript portion where the functionality is controlled and manipulated:

<pre><code>var myApp = angular.module('myApp', []);
 myApp.controller('myCtrl', function($scope) {
   $scope.userid = [1, 2, 3];
   $sope.adduser = function() {

}
});

As I venture towards sending an array of objects to the server, a concern arises regarding handling dynamic userids with an excess of 100 data points. How can I extract each field's model value comprehensively? Furthermore, what approach should be adopted to convert these model data entries into an array of objects resembling the sampleServerData structure showcased below?

i am expecting my final output data like this

var sampleServerData = [{
        "userid": 1,
        "manualcomment": "mycmt1",
        "gender": "male"
    }, {
        "userid": 2,
        "manualcomment": "mycmt2",
        "gender": "male"
    }, {
        "userid": 3,
        "manualcomment": "mycmt3",
        "gender": "female"
    }]

javascript angularjs angularjs-ng-repeat angularjs-forms

Answer 1

Answer №1

To enhance your code, consider changing the id of your textarea to a class, or introduce a textarea id within your user object (further details below).

If your ids are stored in an array, create an array of objects based on your ids array.

var ids = [1, 2, 3];
var users = ids.map(function(id) {
   return {id: id, comment: "", gender: ""};
})

For a helpful solution, I have prepared a jsbin for you. Make sure to click the run with js button as it may not run automatically when loaded.

HTML

<div ng-app="myApp">
<div ng-controller="myCtrl">
    <form role="form" name='userForm' novalidate>
        <div class="container">
            <div class="row" ng-repeat="user in users">
                <div class="form-group">
                    <div class="col-md-3">
                        <label>ID</label>
                        <input ng-model="user.id" id="user.id" name="user.id" placeholder="Enter bugid" type="text" required readonly disabled>
                    </div>
                    <div class="col-md-3">
                        <label>Comments</label>
                        <textarea ng-model="user.comment" id="textarea1" rows="1" required></textarea>
                    </div>

                    <div class="col-md-3 ">
                        <label>Gender</label>

                        <select ng-model="user.gender" name="select2" required>
                            <option value="male">Male</option>
                            <option value="female">Female</option>
                        </select>
                    </div>
                </div>

            </div>
        </div>
        <div class="buttonContainer text-center btn-container">
            <br>
            <button ng-disabled="userForm.$invalid" type="button" id="adduser" ng-click="adduser()">Add user</button>
            <button type="button" class="btn button--default btn--small pull-center">Close</button>
        </div>
    </form>
 </div>

JS

    var myApp = angular.module('myApp', []);
     myApp.controller('myCtrl', function($scope) {
      $scope.ids = [1, 2, 3];
   
      $scope.users = $scope.ids.map(function(id) {
        return {id: id, comment: "", gender: ""};
      });

      $scope.adduser = function() {
        var data = $scope.users.map(function(user) {
          return {
           "userid": user.id,
           "manualcomment": user.comment,
           "gender": user.gender
          }
      });
     
      console.log("data", data)
  }
});

Answer 2

To enhance your code, consider changing the id of your textarea to a class, or introduce a textarea id within your user object (further details below).

If your ids are stored in an array, create an array of objects based on your ids array.

var ids = [1, 2, 3];
var users = ids.map(function(id) {
   return {id: id, comment: "", gender: ""};
})

For a helpful solution, I have prepared a jsbin for you. Make sure to click the run with js button as it may not run automatically when loaded.

HTML

<div ng-app="myApp">
<div ng-controller="myCtrl">
    <form role="form" name='userForm' novalidate>
        <div class="container">
            <div class="row" ng-repeat="user in users">
                <div class="form-group">
                    <div class="col-md-3">
                        <label>ID</label>
                        <input ng-model="user.id" id="user.id" name="user.id" placeholder="Enter bugid" type="text" required readonly disabled>
                    </div>
                    <div class="col-md-3">
                        <label>Comments</label>
                        <textarea ng-model="user.comment" id="textarea1" rows="1" required></textarea>
                    </div>

                    <div class="col-md-3 ">
                        <label>Gender</label>

                        <select ng-model="user.gender" name="select2" required>
                            <option value="male">Male</option>
                            <option value="female">Female</option>
                        </select>
                    </div>
                </div>

            </div>
        </div>
        <div class="buttonContainer text-center btn-container">
            <br>
            <button ng-disabled="userForm.$invalid" type="button" id="adduser" ng-click="adduser()">Add user</button>
            <button type="button" class="btn button--default btn--small pull-center">Close</button>
        </div>
    </form>
 </div>

JS

    var myApp = angular.module('myApp', []);
     myApp.controller('myCtrl', function($scope) {
      $scope.ids = [1, 2, 3];
   
      $scope.users = $scope.ids.map(function(id) {
        return {id: id, comment: "", gender: ""};
      });

      $scope.adduser = function() {
        var data = $scope.users.map(function(user) {
          return {
           "userid": user.id,
           "manualcomment": user.comment,
           "gender": user.gender
          }
      });
     
      console.log("data", data)
  }
});

Answer 3

Answer №2

To utilize ng-repeat in your HTML file, follow this structure:

<div ng-app="myApp">
    <div ng-controller="myCtrl">
        <form role="form" name='userForm' novalidate>
            <div class="container">
                <div class="row" ng-repeat="myid in userId">
                    <div class="form-group">
                        <div class="col-md-3">
                            <label>ID</label>
                            <input ng-model="userId[$index].id" id="myid"name="myid" placeholder="Enter bugid" type="text" required readonly disabled>
                        </div>
                        <div class="col-md-3">
                            <label>Comments</label>
                            <textarea ng-model="userId[$index].manualcomment" id="textarea1" rows="1" required></textarea>
                        </div>

                        <div class="col-md-3 ">
                            <label>Gender</label>

                            <select ng-model="userId[$index].gender" name="select2" required>
                                <option value="male">Male</option>
                                <option value="female">Female</option>

                            </select>
                        </div>
                    </div>

                </div>
            </div>
            <div class="buttonContainer text-center btn-container">
                <br>
                <button ng-disabled="userForm.$invalid" type="button" id="adduser" ng-click="addusers()">Add user</button>
                <button type="button" class="btn button--default btn--small pull-center">Close</button>
            </div>
        </form>
    </div>

Next, create the controller function as follows.

var myApp = angular.module('myApp', []);
 myApp.controller('myCtrl', function($scope) {
   $scope.userId = [1,2,3,4,5] // or new Array(3);

   $sope.adduser = function() {
     var serverData = $scope.userId;
   }
});

Answer 4

To utilize ng-repeat in your HTML file, follow this structure:

<div ng-app="myApp">
    <div ng-controller="myCtrl">
        <form role="form" name='userForm' novalidate>
            <div class="container">
                <div class="row" ng-repeat="myid in userId">
                    <div class="form-group">
                        <div class="col-md-3">
                            <label>ID</label>
                            <input ng-model="userId[$index].id" id="myid"name="myid" placeholder="Enter bugid" type="text" required readonly disabled>
                        </div>
                        <div class="col-md-3">
                            <label>Comments</label>
                            <textarea ng-model="userId[$index].manualcomment" id="textarea1" rows="1" required></textarea>
                        </div>

                        <div class="col-md-3 ">
                            <label>Gender</label>

                            <select ng-model="userId[$index].gender" name="select2" required>
                                <option value="male">Male</option>
                                <option value="female">Female</option>

                            </select>
                        </div>
                    </div>

                </div>
            </div>
            <div class="buttonContainer text-center btn-container">
                <br>
                <button ng-disabled="userForm.$invalid" type="button" id="adduser" ng-click="addusers()">Add user</button>
                <button type="button" class="btn button--default btn--small pull-center">Close</button>
            </div>
        </form>
    </div>

Next, create the controller function as follows.

var myApp = angular.module('myApp', []);
 myApp.controller('myCtrl', function($scope) {
   $scope.userId = [1,2,3,4,5] // or new Array(3);

   $sope.adduser = function() {
     var serverData = $scope.userId;
   }
});

Answer 5

Answer №3

To utilize track by $index in ng-repeat and correlate the index with models:

<div class="row" ng-repeat="myid in userid track by $index">

<div class="form-group">
                    <div class="col-md-3">
                        <label>ID</label>
                        <input ng-model="userId[$index].id" id="myid"name="myid" placeholder="Enter bugid" type="text" required readonly disabled>
                    </div>
                    <div class="col-md-3">
                        <label>Comments</label>
                        <textarea ng-model="userId[$index].manualcomment" id="textarea1" rows="1" required></textarea>
                    </div>

                    <div class="col-md-3 ">
                        <label>Gender</label>

                        <select ng-model="userId[$index].gender" name="select2" required>
                            <option value="male">Male</option>
                            <option value="female">Female</option>

                        </select>
                    </div>

Answer 6

To utilize track by $index in ng-repeat and correlate the index with models:

<div class="row" ng-repeat="myid in userid track by $index">

<div class="form-group">
                    <div class="col-md-3">
                        <label>ID</label>
                        <input ng-model="userId[$index].id" id="myid"name="myid" placeholder="Enter bugid" type="text" required readonly disabled>
                    </div>
                    <div class="col-md-3">
                        <label>Comments</label>
                        <textarea ng-model="userId[$index].manualcomment" id="textarea1" rows="1" required></textarea>
                    </div>

                    <div class="col-md-3 ">
                        <label>Gender</label>

                        <select ng-model="userId[$index].gender" name="select2" required>
                            <option value="male">Male</option>
                            <option value="female">Female</option>

                        </select>
                    </div>

Creating dynamic forms using AngularJS and the ng-repeat directive

Answer №1

HTML

JS

Answer №2

Answer №3

Similar questions

Transitioning images smoothly and responsively with jQuery, creating a beautiful

Tips for creating a row template with pinned content

Is there a way to remove a dynamically rendered component from a list?

Jest does not support util.promisify(setTimeout) functionality

CSS animations for loading page content

When utilizing jQuery to add a <li> element, it suddenly vanishes

Steps to verify if a value is an integer:

The default skin of video.js is disrupted by a 16:8 ratio

Adding additional rows to an Array Object in JavaScript based on a certain condition

Accessing results from geocoder.geocode is restricted to local variables only

Fixing the error message stating 'Argument of type '{}' is not assignable to parameter of type 'any[]'. [ng] Property 'length' is missing in type '{}'. Here are steps to resolve this issue:

methods for efficient set computations

Trouble with component not refreshing upon store modification in Vuex

JavaScript function is not identifiable

In the event that the hash consists of just one string, disregard any additional conditional statements

Enhancing Dataset Quality: Incorporating Failed Results with Apify

Error encountered when attempting to insert data into database due to incompatible data types

Embed Text inside an HTML Canvas

The word-break CSS property is ineffective in this situation

I'm confused by the function: "sort((a: Article, b: Article) => b.votes - a.votes);"