ngMessage驗證未定義

Question

我有以下代碼：

<label for="over_13"> 
    <input type="checkbox" name="over_13" ng-model="user.over_13" ng-required="user.over_13==true"> 
    <span>I'm over 13</span> 
</label> 

    <ng-messages class="modal-error" for="registerForm.over_13.$error" ng-show="registerForm.$submitted" class="error-message"> 
     <ng-message when="required">Are you over 13 years old?</ng-message> 
    </ng-messages> 

但是當我運行它，我獲得通過鍍鉻頁面的HTML後續檢查

<ng-messages class="modal-error ng-inactive" for="registerForm.over_13.$error" ng-show="registerForm.$submitted"> 
     <!-- ngMessage: undefined --> 
    </ng-messages> 

我缺少的東西？

還使用required而不是ng-required生成相同的錯誤。

<label for="over_13"> 
    <input type="checkbox" name="over_13" ng-model="user.over_13" required> 
    <span>I'm over 13</span> 
</label> 

Answer 1

你濫用for，它需要與同一id的元素。所以它不會與name一起使用，絕對不會與$error一起使用。

爲什麼你有你的ng-message爲ng-show="registerForm.$submitted"ng-show條件，你不應該能夠提交表單，因爲複選框required。此外，您已聲明class屬性兩次。

令人困惑，但這應該工作。

<form name="registerForm"> 
    <label> 
    <input type="checkbox" name="over_13" ng-model="user.over_13" required> 
    <span>I'm over 13</span> 
    </label> 

    <ng-messages ng-show="registerForm.over_13.$invalid"> 
    <ng-message when="required">Are you over 13 years old?</ng-message> 
    </ng-messages> 
</form> 

Answer 2

Mikki Viitala關於$提交錯誤。每AngularJS docs爲$submitted：如果

真正的用戶提交，即使其無效的形式。

如果添加一個函數來ng-submit在<form>，即使你中止行動，因爲（例如）$scope.formName.$valid是假的：

$scope.submit = function() { 
    if (!$scope.formName.$valid) { 
     // $scope.formName.$submitted === true 
     return; 
    } 
}; 

$submitted仍然是正確的（和<form>仍然會得到.ng-submitted類）。完全可以有一個<form>，其中CSS選擇器form.ng-pristine.ng-submitted匹配（即用戶什麼都不輸入，但單擊提交按鈕）。

另外，Mikki Viitala對於for屬性是錯誤的。 <label>上的for通過輸入字段上的name或id值（可能是<input>,<select>等）將<label>鏈接到輸入字段。這只是HTML規範的一部分。它主要用於（例如）當你點擊標籤時鏈接字段來獲得焦點。

但<ng-messaages>上的for屬性不同。它是一個表達式，可以評估一個對象（或者dict/associative array /如果你願意的話）。然後<ng-message>元素上的每個when="blah"屬性控制何時顯示該特定消息。

$scope.formName.fieldName.$error返回一個對象，其中每個屬性對應於一種驗證。例如，如果一個字段被標記爲必需，$scope.formName.fieldName.$error.required是一個布爾值，如果該字段有值，則爲true，否則爲false。

<ng-messages>遍歷所有<ng-message>元件的下它按順序使用when="string"或（when="string1, string2"）拉從when="object"結果屬性直到其中的一個是真，那麼它將顯示一個（即，所述<ng-message>的順序元素可能很重要，取決於你想要達到的目標）。

這是全部在AngularJS ngMessage docs。