禁用了nfs的提交按钮

I'm creating a dynamic form that uses Angular validations. When the form loads, it loads a list of contacts (first/last name and email address fields) along with a list of groups. Only the email field is required. I want to disable my submit button is the form is pristine or if any of the validations have failed. I have a dozen other forms like this one that all work, but for some reason, ng-disabled is not working on this form. The button isn't disabled when the form first loads, or even if I invalidate some entries.

我创建了一个动态形式，使用角验证。当表单加载时，它将加载联系人列表(名/姓和电子邮件地址字段)和组列表。只需要电子邮件字段。我想禁用我的提交按钮是原始的表单还是任何验证失败。我有十几个其他的表单，比如这个，它们都可以，但是出于某种原因，ng-disabled并没有使用这个表单。当窗体首次加载时，或者即使我使某些条目无效，也不会禁用该按钮。

Here is my dynamic form:

这是我的动态形式:

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

Here is my form object in my controller:

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

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

Everything else about the form works as expected except the validations. I'm not sure what I'm missing here. I've tried calling debugger to see what the value of $scope.newContactsForm.$pristine is, and it's always set to true when I expect it to be, which should cause the submit button to be disabled.

除了验证之外，表单的其他内容都可以正常工作。我不确定我错过了什么。我尝试调用调试器来查看$scope.newContactsForm的值。$原始是，而且它总是设置为true，当我期望它是，这应该导致提交按钮被禁用。

1 个解决方案

#1

It should be ng-disabled="newContactsForm.$pristine" (Without the $)

它应该是ng-disabled = " newContactsForm。原始的“美元(美元)