AngularJS表单验证未按预期工作
AngularJS表单验证未按预期工作
提问于 2017-07-13 18:05:48
下面的代码(取自W3Schools)在我为submit按钮添加对ng-disabled指令的额外检查时不起作用。我也想使用"myForm.email.$untouched“，这样当有人立即进入页面并且字段为空时，提交按钮将被禁用。但当我添加它时，我必须单击某个地方，然后才会启用该按钮。
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<h2>Validation Example</h2>
<form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate>
<p>Email:
<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>
<p>
<button ng-disabled="myForm.email.$dirty && myForm.email.$invalid">Absenden</button>
</p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.user = 'John Doe';
$scope.email = '';
});
</script>
</body>
</html>我想把代码改成这样，但它不起作用(必须单击某个地方)：
<p>
<button
ng-disabled="myForm.email.$untouched || myForm.email.$dirty && myForm.email.$invalid">Absenden</button>
</p>回答 2
Stack Overflow用户
回答已采纳
发布于 2017-07-13 18:14:17
你必须改变
<p>
<button
ng-disabled="myForm.email.$untouched || myForm.email.$dirty && myForm.email.$invalid">Absenden</button>
</p>至
<p>
<button
ng-disabled="myForm.email.$dirty && myForm.email.$invalid || myForm.email.$pristine">Absenden</button>
</p>Stack Overflow用户
发布于 2017-07-13 18:13:27
尝试此条件
<p>
<button ng-disabled="myForm.email.$touched && myForm.email.$dirty && myForm.email.$invalid">Absenden</button>
</p>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45077492
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号