ng-repeat with form in angularjs

Question

I have created dynamic forms with ng-repeat directive. I am getting form field according to userid value. Once I have filled every field in form my add user button should be enabled. As of now its not enabled. I have attached my code below.

My html code:

<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="myid" id="myid" name="myid" placeholder="Enter bugid" type="text" required readonly disabled>
                    </div>
                    <div class="col-md-3">
                        <label>Comments</label>
                        <textarea ng-model="manualComment" id="textarea1" rows="1"></textarea>
                    </div>

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

                        <select ng-model="gender" name="select2">
                            <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="!(myid  && manualComment && gender)" type="button" id="adduser">Add user</button>
            <button type="button" class="btn button--default btn--small pull-center">Close</button>
        </div>
    </form>
</div>

my app.js file

var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function($scope) {
$scope.userid = [1, 2, 3]
});

How can I enable add user button once all field are filled?

you might need ng-disabled

nadavvadan
– nadavvadan

2017-09-07 18:12:21 +00:00
Commented Sep 7, 2017 at 18:12 — nadavvadan
– nadavvadan, Commented Sep 7, 2017 at 18:12

Naren Murali · Accepted Answer · 2017-09-08 02:49:23Z

1

Update:

If you want to convert your initial array from the server to a usage array check this fiddle

JSFiddle Demo

If you want an object which contains all the form values, please refer to the below fiddle!

JSFiddle Demo

Based on the statement below, this is my solution.

How can I enable add user button once all field are filled?

I have added the required attribute to all the input fields, the form name userForm is a variable in the scope. It has its validation variables, in my case I am using userForm.$invalid which will be true unless all the fields with required attribute are filled. The Add User is disabled by using the ng-disabled attribute, check the below JSFiddle for a demo.

JSFiddle Demo

<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="myid" id="myid" name="myid" placeholder="Enter bugid" type="text" required readonly disabled>
                    </div>
                    <div class="col-md-3">
                        <label>Comments</label>
                        <textarea ng-model="manualComment" id="textarea1" rows="1" required></textarea>
                    </div>

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

                        <select ng-model="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">Add user</button>
            <button type="button" class="btn button--default btn--small pull-center">Close</button>
        </div>
    </form>
</div>
</div>

edited Sep 8, 2017 at 2:49

answered Sep 7, 2017 at 18:13

Naren Murali

66.1k6 gold badges51 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user3760261 Over a year ago

how can i get each field model value in this example . i need to pass this model value to server.

Naren Murali Over a year ago

@user3760261 Updated my answer!

user3760261 Over a year ago

According to my requirement my $scope.userid has only userid's . in that i cant attach any value like you did. is there any other way to get this model values

Naren Murali Over a year ago

@user3760261 Generate this object with the $scope.userid, its a simple for loop, you didn't mention this in the question :(

user3760261 Over a year ago

once i am connect with my server this $scope.userid get more than 100 userid . how can i attach this object to that $scope.userid. can you please send sample fiddle for this

|

Collectives™ on Stack Overflow

ng-repeat with form in angularjs

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related