如何讓ng-show使用AngularJS驗證

Question

我在弄清楚表單驗證的問題時遇到了麻煩。 我正在使用ng-show，我想我正確地引用了表單控件，盡管我以前從未做過（我是AngularJS的新手）。 我在此處遵循了其他幾個示例，但是不知何故我仍然缺少一些東西。 這是我的代碼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的表單，您從表單元素中忘記了name屬性。要訪問您的輸入元素，它應該是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>