如何让 AngularJS 验证与 ng-show 一起工作

Question

我在弄清楚我在表单验证中做错了什么时遇到了麻烦。我正在使用ng-show，我认为我正确地引用了表单控件，尽管我以前从未这样做过(我是AngularJS的新手(。我已经在SO上遵循了其他几个示例，但不知何故我仍然缺少一些东西。这是我的代码的Plunker。在 Plunker 中，无论是否输入了字段，都会显示我的错误消息。出于某种原因，在本地主机上运行代码时，错误消息根本不显示。

此外，这是其中的一部分：

HTML：

<div class="form-group">
<label for="emailAddress">Email address (required):</label>
<input id="emailAddress" type="text" class="form-control" placeholder="Email address" ng-model="about.email" ng-pattern="about.emailFormat" required/>
<span ng-show="contactForm.emailAddress.$dirty && contactForm.emailAddress.$error.pattern">Email is invalid</span>
</div>  

JS：

(function () {
angular
.module('app')
.controller('About', About);
function About() {
var vm = this;
vm.name = "";
vm.email = "";
vm.message = "";
vm.emailFormat = /^[a-z]+[a-z0-9._]+@[a-z]+.[a-z.]{2,10}$/;
vm.sendMail = function () {
};
vm.cancel = function() {
vm.name = "";
vm.email = "";
vm.message = "";
};      
return vm;
}})();

Answer 1

假设您有一个名称属性为contactForm的表单。您忘记了表单元素中的名称属性。要访问您的输入元素，它应该是formName.inputName

HTML：

<div class="form-group">
<label for="emailAddress">Email address (required):</label>
<input id="emailAddress"
name="emailAddress" type="text"
class="form-control"
placeholder="Email address"
ng-model="about.email"
ng-pattern="about.emailFormat"
required/>
<span ng-show="contactForm.emailAddress.$dirty && contactForm.emailAddress.$error.pattern">Email is invalid</span>
</div>

工作小提琴：https://plnkr.co/edit/LIFcg3dRogw5yYgeuUac?p=preview

获取更多信息： https://scotch.io/tutorials/angularjs-form-validation

Answer 2

每当您进行表单验证时，都需要使用正确的 HTML 标记，因此这就是它无法按预期工作的原因。

<form role="form" name="contactForm">
<div class="form-group">
<label for="emailAddress">Email address (required):</label>
<input name="emailAddress" id="emailAddress" type="text" class="form-control" placeholder="Email address" ng-model="about.email" ng-pattern="about.emailFormat" required/>
<span ng-show="contactForm.emailAddress.$dirty && contactForm.emailAddress.$error.pattern">Email is invalid</span>
</div> 
</form>