Javascript 如何使用ng show进行AngularJS验证

我很难弄清楚我的表单验证有什么问题。我使用的是ng show，我认为我正确地引用了表单控件，尽管我以前从未这样做过（我是AngularJS新手）。在这里，我遵循了其他几个例子，但不知何故，我仍然遗漏了一些东西。这是我的一段代码。在Plunker中，无论是否输入了字段，都会显示我的错误消息。由于某些原因，在localhost上运行代码时，根本不会显示错误消息

此外，以下是其中的一部分：

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>  

(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;
}})();

<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>

---

假设您有一个具有name属性的表单

contactForm

。您忘记了表单元素中的name属性。要访问您的输入元素，它应该是

formName.inputName

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>  

(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;
}})();

<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>

电子邮件地址（必填）：
电子邮件无效

工作小提琴：

---

有关详细信息：

无论何时进行表单验证，都需要使用正确的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>

电子邮件地址（必填）：
电子邮件无效

你们都是对的-我忘记了name属性，尽管我一次又一次地查看它，看到id属性不知怎么地认为它是name。维维兹是第一个，尽管我对你的答案投了赞成票。非常感谢。