在按钮中使用ng-disabled不工作的原因是什么?
What are the reasons for ng-disabled not to work when used in a button
我有一个Angular的形式,我正在做验证。我希望表单是不可提交的,如果任何必需的字段是空的,验证失败。表格如下:
<form name="userForm" novalidate>
<fieldset ng-disabled="data.externalUserDisable">
<div class="restrictwidth">
<h1 ng-if="data.urlId === 'new'" translate>NewUser</h1>
<div class="form-group required" ng-class="{ 'has-error' : userForm.username.$invalid && !userForm.username.$pristine }">
<label class="control-label" translate>UsernameEmail</label>
<input class="form-control" type="email" id="username" name="username" ng-model="user.Username" ng-model-options="{'update On': 'blur'}" ng-disabled="(!data._editMode && !(user.Status === 'NotVerified' || user.Status === 'ActivationPending'))" ng-maxlength="256" required>
<div class="error-messages" ng-messages="userForm.username.$error" ng-if="userForm.$submitted || !userForm.username.$pristine">
<div ng-message="required" class="help-block error-message"><span translate="UsernameRequired"></span></div>
</div>
</div>
<div class="row">
<div class="form-group required col-sm-6" ng-class="{ 'has-error' : userForm.firstName.$invalid && !userForm.firstName.$pristine }">
<label class="control-label" translate>FirstName</label>
<input class="form-control" type="text" id="firstName" name="firstName" ng-model="user.FirstName" ng-maxlength="64" required>
<div class="error-messages" ng-messages="userForm.firstName.$error" ng-if="userForm.$submitted || !userForm.firstName.$pristine">
<div ng-message="maxlength" class="help-block error-message"><span translate="FirstNameLength"></span></div>
<div ng-message="required" class="help-block error-message"><span translate="FirstNameRequired"></span></div>
</div>
</div>
<div class="form-group required col-sm-6" ng-class="{ 'has-error' : userForm.lastName.$invalid && !userForm.lastName.$pristine }">
<label class="control-label" translate>LastName</label>
<input class="form-control" type="text" id="lastName" name="lastName" ng-model="user.LastName" ng-maxlength="64" required>
<div class="error-messages" ng-messages="userForm.lastName.$error" ng-if="userForm.$submitted || !userForm.lastName.$pristine">
<div ng-message="maxlength" class="help-block error-message"><span translate="LastNameLength"></span></div>
<div ng-message="required" class="help-block error-message"><span translate="LastNameRequired"></span></div>
</div>
</div>
</div>
<div class="form-group required" ng-class="{ 'has-error' : userForm.masterEngagement.$invalid && !userForm.masterEngagement.$pristine }">
<label class="control-label" translate>MasterEngagement</label><i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
<input type="text" name="masterEngagement" ng-model="user.MasterEngagementId" ng-if="!data.externalUserDisable" typeahead="engagement.EngagementId as engagement.EngagementName for engagement in getLocation($viewValue)" typeahead-on-select='onSelect($item, $model, $label)'
typeahead-loading="loadingLocations" typeahead-editable="false" typeahead-input-formatter="formatLabel($model)" typeahead-template-url="customTemplate.html" typeahead-wait-ms="500" class="form-control" ng-disabled="singleEngagementAdmin !== '0'" required>
<input type="text" name="masterEngagement" ng-model="user.MasterEngagementName" ng-if="data.externalUserDisable" class="form-control" ng-disabled="singleEngagementAdmin !== '0'" required>
</div>
...
<div class="restrictwidth">
<button ng-if="data.urlId === 'new'" type="submit" class="btn btn-primary btn-lg pull-right ladda-button" data-style="expand-left" ng-save-in-progress ng-disabled="{{ userForm.$invalid }}" ng-click="insert()" translate>Save</button>
<button ng-if="data.urlId !== 'new'" type="submit" class="btn btn-primary btn-lg pull-right ladda-button" data-style="expand-left" ng-save-in-progress ng-disabled="userForm.$invalid || (!superUser && user.Superuser)" ng-click="update()"><span class="ladda-label" translate>Update</span></button>
<a class="btn btn-link pull-left" ng-click="back()" type="button"><span class="ladda-label" translate>Cancel</span></a>
</div>
</div>
</fieldset>
</form>
使用ng-disabled禁用保存按钮是正确的。但是按钮没有被禁用。当表单加载时,按钮不会被禁用,即使出现验证错误,按钮也不会被禁用。
我检查了userForm
对象,$invalid
值为真,$valid
值为假。
打印userForm..的输出表单
{
"$error": {
"required": [
{
"$validators": {},
"$asyncValidators": {},
"$parsers": [],
"$formatters": [
null
],
"$viewChangeListeners": [],
"$untouched": true,
"$touched": false,
"$pristine": true,
"$dirty": false,
"$valid": false,
"$invalid": true,
"$error": {
"required": true
},
"$name": "username",
"$options": {
"update On": "blur",
"updateOnDefault": true
}
},
{
"$validators": {},
"$asyncValidators": {},
"$parsers": [],
"$formatters": [
null
],
"$viewChangeListeners": [],
"$untouched": true,
"$touched": false,
"$pristine": true,
"$dirty": false,
"$valid": false,
"$invalid": true,
"$error": {
"required": true
},
"$name": "firstName",
"$options": null
},
{
"$validators": {},
"$asyncValidators": {},
"$parsers": [],
"$formatters": [
null
],
"$viewChangeListeners": [],
"$untouched": true,
"$touched": false,
"$pristine": true,
"$dirty": false,
"$valid": false,
"$invalid": true,
"$error": {
"required": true
},
"$name": "lastName",
"$options": null
},
{
"$validators": {},
"$asyncValidators": {},
"$parsers": [
null
],
"$formatters": [
null,
null
],
"$viewChangeListeners": [],
"$untouched": true,
"$touched": false,
"$pristine": true,
"$dirty": false,
"$valid": false,
"$invalid": true,
"$error": {
"required": true
},
"$name": "masterEngagement",
"$options": null
}
]
},
"$name": "userForm",
"$dirty": false,
"$pristine": true,
"$valid": false,
"$invalid": true,
"$submitted": false,
"username": {
"$validators": {},
"$asyncValidators": {},
"$parsers": [],
"$formatters": [
null
],
"$viewChangeListeners": [],
"$untouched": true,
"$touched": false,
"$pristine": true,
"$dirty": false,
"$valid": false,
"$invalid": true,
"$error": {
"required": true
},
"$name": "username",
"$options": {
"update On": "blur",
"updateOnDefault": true
}
},
"firstName": {
"$validators": {},
"$asyncValidators": {},
"$parsers": [],
"$formatters": [
null
],
"$viewChangeListeners": [],
"$untouched": true,
"$touched": false,
"$pristine": true,
"$dirty": false,
"$valid": false,
"$invalid": true,
"$error": {
"required": true
},
"$name": "firstName",
"$options": null
},
"lastName": {
"$validators": {},
"$asyncValidators": {},
"$parsers": [],
"$formatters": [
null
],
"$viewChangeListeners": [],
"$untouched": true,
"$touched": false,
"$pristine": true,
"$dirty": false,
"$valid": false,
"$invalid": true,
"$error": {
"required": true
},
"$name": "lastName",
"$options": null
},
"title": {
"$validators": {},
"$asyncValidators": {},
"$parsers": [],
"$formatters": [
null
],
"$viewChangeListeners": [],
"$untouched": true,
"$touched": false,
"$pristine": true,
"$dirty": false,
"$valid": true,
"$invalid": false,
"$error": {},
"$name": "title",
"$options": null
},
"employeeNumber": {
"$validators": {},
"$asyncValidators": {},
"$parsers": [],
"$formatters": [
null
],
"$viewChangeListeners": [],
"$untouched": true,
"$touched": false,
"$pristine": true,
"$dirty": false,
"$valid": true,
"$invalid": false,
"$error": {},
"$name": "employeeNumber",
"$options": null
},
"userInfo": {
"$validators": {},
"$asyncValidators": {},
"$parsers": [],
"$formatters": [
null
],
"$viewChangeListeners": [],
"$untouched": true,
"$touched": false,
"$pristine": true,
"$dirty": false,
"$valid": true,
"$invalid": false,
"$error": {},
"$name": "userInfo",
"$options": null
},
"timeZone": {
"$viewValue": "W. Europe Standard Time",
"$modelValue": "W. Europe Standard Time",
"$validators": {},
"$asyncValidators": {},
"$parsers": [],
"$formatters": [],
"$viewChangeListeners": [],
"$untouched": true,
"$touched": false,
"$pristine": true,
"$dirty": false,
"$valid": true,
"$invalid": false,
"$error": {},
"$name": "timeZone",
"$options": null
},
"culture": {
"$viewValue": "en-US",
"$modelValue": "en-US",
"$validators": {},
"$asyncValidators": {},
"$parsers": [],
"$formatters": [],
"$viewChangeListeners": [],
"$untouched": true,
"$touched": false,
"$pristine": true,
"$dirty": false,
"$valid": true,
"$invalid": false,
"$error": {},
"$name": "culture",
"$options": null
},
"policy": {
"$validators": {},
"$asyncValidators": {},
"$parsers": [],
"$formatters": [],
"$viewChangeListeners": [
null
],
"$untouched": true,
"$touched": false,
"$pristine": true,
"$dirty": false,
"$valid": true,
"$invalid": false,
"$error": {},
"$name": "policy",
"$options": null
},
"masterEngagement": {
"$validators": {},
"$asyncValidators": {},
"$parsers": [
null
],
"$formatters": [
null,
null
],
"$viewChangeListeners": [],
"$untouched": true,
"$touched": false,
"$pristine": true,
"$dirty": false,
"$valid": false,
"$invalid": true,
"$error": {
"required": true
},
"$name": "masterEngagement",
"$options": null
}
}
按钮标签实际上一切都很好,看看这个演示:http://plnkr.co/edit/fJoq7RLrDNYMxYwh6bPq?p=preview
在你的情况下的问题是ng-if
指令,它创建了一个内部作用域,但形式是在父作用域中声明的。在这个例子中,要基于表单禁用按钮,你需要从parent访问它。简化如下:
<button type="submit" ng-disabled="$parent.userForm.$invalid">Save</button>
编辑:有两个ng-if
意味着你必须有两个父作用域在这种情况下,在原始代码中,有一个ng-if
访问无效属性是通过$parent.userForm.$invalid
,有两个ng-if
是
<button type="submit" ng-if="data.urlId === 'new'" ng-disabled="$parent.$parent.userForm.$invalid">Save</button>
这可以通过使用ng-show
或ng-hide
而不是ng-if
来避免,区别在于前两个不创建内部作用域,而每个ng-if
将在其父作用域内创建其作用域。如果将ng-if都更改为ng-show,则该按钮将与原始ng-disabled="userForm.$invalid"
一起工作。
相关文章:
- Doppio:多线程是如何工作的,有什么限制吗
- 让 jquery 为 ajax 添加的元素工作的最佳方法是什么?
- Jquery自动完成不是't工作.我做错了什么
- 角度控制器的作用是什么;t控制器'他的工作由指令来完成
- FileWriter在javascript中究竟是什么工作的
- Asp.net.服务器端验证和客户端验证很好地协同工作的最佳方式是什么?
- change和onchange don'I don’我不能在电脑上工作.可能是什么原因造成的
- 是什么阻止了这个简单的HTML代码的工作
- AJAX中的XMLHttpRequest变量是如何工作的?它的工作原理是什么
- 当一个实时网站在文件系统中工作时,是什么导致它无法工作
- 是什么让jQuery.印刷从工作与传单
- 在按钮中使用ng-disabled不工作的原因是什么?
- 我的全屏bigvideo.js视频在本地所有页面上工作,但一旦在服务器上停止工作,这可能是什么原因?
- 确定一个bug是浏览器的错误还是我自己的错误的工作流程是什么?
- Javascript表单提交不工作.会是什么呢?
- 有人能解释一下对象内部的数组是如何工作的吗?这段代码有什么问题?
- Lodash从3到4的变化是什么,这段代码不能工作
- 在给定的工作流中,对angularjs和指令的最佳实践是什么?
- AngularJS是如何做它的工作的(是什么让它打勾的)
- Reactjs——强制刷新的工作流是什么?