javascript AngularJS 表单验证问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31518985/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS form validation issues
提问by Sumit
I am trying to do a simple form validation using angular js. But it doesnt seems to work and I am not getting what I am missing.
我正在尝试使用 angular js 进行简单的表单验证。但它似乎不起作用，我没有得到我缺少的东西。
HTML
HTML
<form role="form" class="ng-pristine ng-valid" name="registerForm">
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="First Name" name="firstname" type="text"
autofocus="" required ng-class="{'has-error': registerForm.firstname.$invalid}">
</div>
<div class="form-group">
<input class="form-control" placeholder="Last Name" name="lastname" type="text" value="">
</div>
<div class="form-group">
<input class="form-control" placeholder="E-Mail" name="email" type="email" value="" ng-class="{'has-error': registerForm.email.$dirty}">
<div ng-show="registerForm.email.$dirty">Email Invalid</div>
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" name="password" type="password" value="" autocomplete="off">
</div>
<div class="form-group">
<input class="form-control" placeholder="Organization Name" name="organizationName" type="text" value="">
</div>
<div class="form-group">
<select data-ng-options="item.Display for item in OrganizationTypes track by item.Value" data-ng-model="SelectOrganizationType" class="form-control">
<option value="">-Select Organization Type-</option>
</select>
</div>
<input type="button" value="Register" class="btn btn-lg btn-success btn-block" data-ng-click="Submit()" name="btnSubmit"/>
</fieldset>
</form>Now the issue is, I am expecting that if I start entering invalid email then it will show me error message "Email Invalid". But that doesn't happen.
现在的问题是，我希望如果我开始输入无效的电子邮件，那么它会显示错误消息“电子邮件无效”。但这不会发生。
Also when i put a debug before submitting blank form, it says "registerForm.$valid = true"
此外，当我在提交空白表单之前进行调试时，它会显示“registerForm.$valid = true”
Any guess what am I missing. Any module that i need to include ?
任何猜测我错过了什么。我需要包含任何模块吗？
Here is Plunker
这里是普朗克
采纳答案by Daniel Cottone
You are missing a bunch of stuff. First of all, you need to have your fields associated with a model for them to be validated. Second, your syntax for accessing errors is incorrect.
你错过了一堆东西。首先，您需要将您的字段与模型相关联，以便对其进行验证。其次，您访问错误的语法不正确。
Here is a working plunkr for what you are trying to do.
This is the relevant code:
这是相关代码：
<body ng-controller="MainCtrl">
<form role="form" name="registerForm" novalidate>
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="First Name" name="firstname" ng-model="firstname" type="text" autofocus="" ng-class="{'has-error': registerForm.firstname.$error.required}" required />
</div>
<div class="form-group">
<input class="form-control" placeholder="Last Name" name="lastname" ng-model="lastname" type="text" value="">
</div>
<div class="form-group">
<input class="form-control" placeholder="E-Mail" name="email" ng-model="email" type="email" value="" ng-class="{'has-error': registerForm.email.$error.pattern}" ng-pattern="/^\S+@\S+\.\S+$/i" required />
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" name="password" ng-model="password" type="password" value="" autocomplete="off">
</div>
<div class="form-group">
<input class="form-control" placeholder="Organization Name" name="organizationName" ng-model="organizationName" type="text" value="">
</div>
<div class="form-group">
<select data-ng-options="item.Display for item in OrganizationTypes track by item.Value" data-ng-model="SelectOrganizationType" class="form-control">
<option value="">-Select Organization Type-</option>
</select>
</div>
<input type="button" value="Register" class="btn btn-lg btn-success btn-block" data-ng-click="Submit()" name="btnSubmit" />
</fieldset>
</form>
<div ng-show="registerForm.firstname.$error.required">You must enter a first name.</div>
<div ng-show="registerForm.email.$error.pattern || registerForm.email.$error.required">Email Invalid</div>
</body>
回答by NeoWang
First, you need registerForm.email.$error.emailto trigger the 'invalid email' alert.
首先，您需要registerForm.email.$error.email触发“无效电子邮件”警报。
Second, I guess you have to bind these input fields with ng-models, but I am not sure if this is necessary.
其次，我猜你必须用ng-models绑定这些输入字段，但我不确定这是否有必要。
One more thing, add 'novalidate' to the form element.
还有一件事，向表单元素添加“novalidate”。
<div class="form-group">
<input class="form-control" placeholder="E-Mail" name="email" type="email" value="" ng-model="" >
<div ng-show="registerForm.email.$error.email">Email Invalid</div>
</div>
回答by Tarun Dugar
Well, I am not sure but I think you also have to use $errorwith $dirtylike this:
好吧，我不确定，但我认为您还必须像这样将$error与$dirty一起使用：
<div ng-show="registerForm.email.$dirty && registerForm.email.$error.email">Email Invalid</div>
Also, add novalidateto disable default browser validation like this:
此外，添加novalidate以禁用默认浏览器验证，如下所示：
<form role="form" class="ng-pristine ng-valid" name="registerForm" novalidate>
