Angular JS表单验证似乎不起作用 [英] Angular JS form validation does not seem to work
本文介绍了Angular JS表单验证似乎不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
有人可以告诉我为什么我的验证不起作用.我关注了许多博客，但似乎无法自行调试.
< body data-ng-app ="testapp">< div data-ng-controller ="testCtrl">< h1>测试{{name}} !!</h1>< form name ="loginForm" action ="login" novalidate><输入type ="email" name ="email" placeholder ="email"是必需的/><输入类型=密码" name =密码"占位符=密码"是必需的/>< button type ="submit" ng-disabled ="loginForm.$ invalid">登录</button>< p ng-show ="loginForm.$ invalid">请修正您的表格.</p>< p ng-show ="loginForm.email.$ invalid">请修正您的电子邮件.< p ng-show ="loginForm.password.$ invalid">请修改密码.</p></form></div>< script>var testapp = angular.module('testapp'，[]);var testCtrl = function($ scope){$ scope.name ='验证';};</script>
解决方案
为使Angular跟踪表单输入的更改，需要将它们定义为范围内的 ng-model 属性./p>
因此，如果添加适当的 ng-model 属性，您的演示将可以正常工作:
< body data-ng-app ="testapp">< div data-ng-controller ="testCtrl">< h1>测试{{name}} !!</h1>< form name ="loginForm" action ="login" novalidate><输入type ="email" name ="email" ng-model ="email" placeholder ="email"是必需的/><输入type ="password" name ="password" ng-model ="passowrd" placeholder ="password"必填/>< button type ="submit" ng-disabled ="loginForm.$ invalid">登录</button>< p ng-show ="loginForm.$ invalid">请修正您的表格.</p>< p ng-show ="loginForm.email.$ invalid">请修正您的电子邮件.< p ng-show ="loginForm.password.$ invalid">请修改密码.</p></form></div>< script>var testapp = angular.module('testapp'，[]);var testCtrl = function($ scope){$ scope.name ='验证';};</script> 这是一个工作的小提琴.
Can someone please tell me why my validations are not working. I followed many blogs and can't seem to debug it on my own.
<body data-ng-app="testapp">
<div data-ng-controller="testCtrl">
<h1>Test {{name}}!!</h1>
<form name="loginForm" action="login" novalidate>
<input type="email" name="email" placeholder="email" required/>
<input type="password" name="password" placeholder="password" required/>
<button type="submit" ng-disabled="loginForm.$invalid">Login</button>
<p ng-show="loginForm.$invalid">Please fix your form.</p>
<p ng-show="loginForm.email.$invalid">Please fix your email.</p>
<p ng-show="loginForm.password.$invalid">Please fix your password.</p>
</form>
</div>
<script>
var testapp = angular.module('testapp', []);
var testCtrl = function($scope) {
$scope.name = 'validation';
};
</script>
解决方案
In order for Angular to track changes on form inputs, they need to be defined as ng-model properties on the scope.
So, your demo will work if you add the appropriate ng-model attributes:
<body data-ng-app="testapp">
<div data-ng-controller="testCtrl">
<h1>Test {{name}}!!</h1>
<form name="loginForm" action="login" novalidate>
<input type="email" name="email" ng-model="email" placeholder="email" required/>
<input type="password" name="password" ng-model="passowrd" placeholder="password" required/>
<button type="submit" ng-disabled="loginForm.$invalid">Login</button>
<p ng-show="loginForm.$invalid">Please fix your form.</p>
<p ng-show="loginForm.email.$invalid">Please fix your email.</p>
<p ng-show="loginForm.password.$invalid">Please fix your password.</p>
</form>
</div>
<script>
var testapp = angular.module('testapp', []);
var testCtrl = function($scope) {
$scope.name = 'validation';
};
</script>
Here is a working fiddle.
这篇关于Angular JS表单验证似乎不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
