javascript - Angular 验证消息不适用于 ng-show 和两个输入

Question

我已经实现了一个带有模式的表单。表单可以有“创建”或“编辑”模式。根据模式，它在布局的一个地方或另一个地方显示一些 div。 Div 内容是相同的，它是输入和一些验证消息。

这是一个简化的例子。

查看:

<div ng-app="myApp">
  <div ng-controller="MyCtrl">
   <form name="editForm">
     <div ng-show='mode == "Edit"'>
       <div class="form-group" ng-class="{true:'has-error',false:''}[editForm.FirstName.$valid === false && editForm.FirstName.$dirty]">
          <input type="text" ng-model="foo" ng-maxlength="5" name="foo" required />
          <div class="help-block" ng-messages="editForm.foo.$error" ng-if="editForm.foo.$dirty">
            <p ng-message="required">Required</p>
            <p ng-message="maxlength">Too long</p>
          </div>
       </div>
     </div>
     <div ng-show='mode == "Create"'>
       <div class="form-group" ng-class="{true:'has-error',false:''}[edit.foo.$valid === false && edit.foo.$dirty]">
          <input type="text" ng-model="foo" ng-maxlength="5" name="foo" required />
          <div class="help-block" ng-messages="editForm.foo.$error" ng-if="editForm.foo.$dirty">
            <p ng-message="required">Required</p>
            <p ng-message="maxlength">Too long</p>
          </div>
       </div>
     </div>
   </form>
      <div>
      Mode: {{mode}} <br>
      Value: {{foo}} <br>
      Is form valid: {{editForm.foo.$valid}} <br>
      </div>
  </div>
</div>

Controller :

var myApp = angular.module('myApp',['ngMessages']);

myApp.controller('MyCtrl',function($scope){
    $scope.mode = 'Edit';
});

Here's JSFiddle with working example .

问题是 - 验证消息仅在显示最后一个输入时才能正常工作。在编辑模式下 - 即使是相同的 - 消息也不会正确显示。

Answer 1

而不是 ng-show使用 ng-if指令。

ng-show导致浏览器同时呈现 div元素，带有 ng-hide ng-show 元素上的类表达式被评估为 false .

ng-if另一方面导致div如果 ng-if 则不呈现元素表达式是 false .