Question

我用ng-repeat指令创建了动态表单。我根据用户ID值获取表单字段。一旦我填写了表单中的每个字段，我应该启用添加用户按钮。截至目前尚未启用。我在下面附上了我的代码。

我的HTML代码：

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

我的app.js文件

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

填写完所有字段后，如何启用添加用户按钮？

Answer 1

<强>更新

如果要将初始数组从服务器转换为使用数组，请检查此小提琴

JSFiddle Demo

如果您想要一个包含所有表单值的对象，请参阅下面的小提琴！

JSFiddle Demo

根据以下声明，这是我的解决方案。

填写完所有字段后，如何启用添加用户按钮？

我已将required属性添加到所有输入字段，表单名称userForm是范围中的变量。它有自己的验证变量，在我的例子中我使用的是userForm.$invalid，除非填充了required属性的所有字段，否则它将为真。使用Add User属性禁用ng-disabled，请查看以下JSFiddle以获取演示。

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>

在angularjs中使用form重复ng-repeat

1 个答案: