Question

我正在创建一个使用Angular验证的动态表单。加载表单时，它会加载联系人列表（名/姓和电子邮件地址字段）以及组列表。只需要电子邮件字段。我想禁用我的提交按钮是表单是原始的还是任何验证失败。我有十几种其他形式的形式都可以使用，但出于某种原因，ng-disabled不能在这种形式上工作。首次加载表单时，或者即使我使某些条目无效，也不会禁用该按钮。

这是我的动态表格：

<form accept-charset="UTF-8" name="newContactsForm" ng-submit="update(newContacts)" novalidate>
    <input name="utf8" type="hidden" value="✓">
    <input name="authenticity_token" type="hidden" ng-model="newContacts.token" ng-init="newContacts.token='<%= form_authenticity_token %>'">

    <div class="form-group multiple-photo-upload">
        <input class="btn btn-primary pull-right" style="margin-right:5px;" name="commit" type="submit" value="Update Contacts" ng-disabled="$newContactsForm.$pristine">
        <div class="btn btn-default pull-right" style="margin-right:5px;" ng-click="addGroup()">Add Group</div>
        <div class="btn btn-default pull-right" style="margin-right:5px;" ng-click="addContact()">Add Contact</div>
    </div>

    <table class="table table-bordered table-hover contacts-table">
        <thead>
            <tr>
                <th class="text-center col-button">
                    <div class="btn btn-danger btn-sm one-em" ng-show="false"><i class="fa fa-trash"></i></div>
                </th>
                <th class="text-center col-field">First Name</th>
                <th class="text-center col-field">Last Name</th>
                <th class="text-center col-field">Email</th>
                <th class="col-field" ng-repeat="g in groupsArray" class="text-center col-field" id="{{'group-' + $index}}">
                    <div class="input-group">
                        <span class="input-group-btn" style="width:initial;">
                            <div class="btn btn-danger btn-sm one-em" ng-if="g.id" ng-click="deleteGroup(g.id)"><i class="fa fa-trash"></i></div>
                            <div class="btn btn-danger btn-sm one-em" ng-if="!g.id" ng-click="removeGroup($index)"><i class="fa fa-times"></i></div>
                        </span>
                        <input type="text" ng-init="newContacts.groups[$index].name = g.name || null" ng-model="newContacts.groups[$index].name" class="form-control" required>
                    </div>
                </th>
            </tr>
        </thead>
        <tbody id="contacts">
            <tr ng-repeat="c in contactsArray" id="{{'contact-' + $index}}">
                <input name="id" type="hidden" ng-init="newContacts.contacts[$index].id = c.id" ng-model="newContacts.contacts[$index].id">
                <td class="col-button">
                    <div class="btn btn-danger btn-sm one-em" ng-if="c.id" ng-click="deleteContact(c.id)"><i class="fa fa-trash"></i></div>
                    <div class="btn btn-danger btn-sm one-em" ng-if="!c.id" ng-click="removeContact($index)"><i class="fa fa-times"></i></div>
                </td>
                <td class="col-field">
                    <input type="text" ng-init="newContacts.contacts[$index].first_name = c.first_name" ng-model="newContacts.contacts[$index].first_name" class="form-control">
                </td>
                <td class="col-field">
                    <input type="text" ng-init="newContacts.contacts[$index].last_name = c.last_name" ng-model="newContacts.contacts[$index].last_name" class="form-control">
                </td>
                <td class="col-field">
                    <input type="text" ng-init="newContacts.contacts[$index].email = c.email" ng-model="newContacts.contacts[$index].email" class="form-control" required>
                </td>
                <td class="col-field" ng-repeat="g in $parent.groupsArray" id="{{'group-' + $index + '-td-' + $parent.$index}}">
                    <input type="checkbox" ng-init="newContacts.contacts[$parent.$index].groups[g.name] = c.groups[g.name] || false" ng-model="newContacts.contacts[$parent.$index].groups[g.name]">
                </td>
            </tr>
        </tbody>
    </table>
</form>

这是我的控制器中的表单对象：

$scope.form = {};
$scope.newContacts = {
    token: $scope.token,
    contacts: {},
    groups: {}
};

除了验证之外，表单的其他所有内容都按预期工作。我不确定我在这里失踪了什么。我尝试过调用debugger来查看$scope.newContactsForm.$pristine的价值是什么，并且在我预期的时候它始终设置为true，这应该会导致提交按钮被禁用。

Answer 1

应该是ng-disabled="newContactsForm.$pristine"（没有$）

ng-disabled无法处理提交按钮

1 个答案: