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?

Answer 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>