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>

控制器：

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元素无法呈现。

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

1 个答案: