Javascript 角度验证消息don'；t使用ng show和两个输入

我已经用一个模式实现了一个表单。表单可以具有“创建”或“编辑”模式。根据模式的不同，它在布局的一个位置或另一个位置显示一些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>

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

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

---

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

使用

ng if

指令代替

ng show

ng show

使浏览器呈现两个

div

元素，元素上的

ng hide

类将

ng show

表达式计算为

false

---

ng if

另一方面，如果

ng if

表达式为

false

，

div

元素不被渲染，我不明白，有什么问题。。。您有什么问题？在编辑模式下，验证消息不会显示。请参阅此处的演示--在两种模式之间切换，并尝试在两种模式下输入长度大于5的字符串。