AngularJS字段驗證表達式在ng-show中似乎不起作用

Question

我正在爲AngularJS驗證而苦苦掙扎。這裏是我的SSCCE HTML 5中（其中，因我的服務器端框架，必須是有效的XML）：

View in JSFiddle

HTML

<div ng-app=""> 
    <form name="myForm" ng-controller="ValidationTest" novalidate="novalidate"> 
     <input name="email" ng-model="myForm.email" type="email" required="required" /> 
     <div> 
      Field: 
      <span ng-show="myForm.email.$valid">valid</span> 
      <span ng-show="myForm.email.$invalid">invalid</span> 
      <span ng-show="myForm.email.$pristine">pristine</span> 
      <span ng-show="myForm.email.$dirty">dirty</span> 
     </div> 
     <div> 
      Form: 
      <span ng-show="myForm.$valid">valid</span> 
      <span ng-show="myForm.$invalid">invalid</span> 
      <span ng-show="myForm.$pristine">pristine</span> 
      <span ng-show="myForm.$dirty">dirty</span> 
     </div> 
    </form> 
</div> 

CSS

input.ng-valid { 
    border-color: #0f0; 
} 
input.ng-invalid { 
    border-color: #f00; 
} 
input.ng-pristine { 
    background-color: #eef; 
} 
input.ng-dirty { 
    background-color: #fee; 
} 

的JavaScript

function ValidationTest($scope) {} 

當我運行這種情況下，適用於表單元素的CSS類正確反映其驗證狀態，作爲對該表單做NG秀指令。但是，該字段的ng-show指令開始正確（顯示「無效」和「原始」），但是一旦我開始在字段中輸入內容，全部消失。據我所知，我這樣做是因爲documentation表明，所以有什麼問題？

Answer 1

剛剛意識到原因：代表字段的AngularJS對象和字段本身的值都綁定到相同的位置：myForm.email。 input元素的值應該只是email。

Ahmad要求澄清：表達式myForm.email是指由AngularJS創建的對象，用於表示myForm表單中的email字段。這不是該字段的實際值，這是您應該在<input>元素的ng-model屬性中放置的值。爲此，我應該在我想用來存儲該值的範圍內指定一個屬性的名稱。所以改變ng-model說只是email而不是myForm.email是修復。然後範圍的email屬性將包含一個字符串，該字符串是在字段中輸入的值（當它有效時）。