javascript - 如何让 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>

工作 fiddle :https://plnkr.co/edit/LIFcg3dRogw5yYgeuUac?p=preview

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