我正在创建一个使用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
,这应该会导致提交按钮被禁用。
答案 0 :(得分:2)
应该是ng-disabled="newContactsForm.$pristine"
(没有$
)