Question

我有一个包含ng-form模板的指令：

<ng-form name="autocompleteForm">
  <div class="form-group" show-errors>
    <input type="text" class="form-control" ng-model="ctrl.val.value" name="autocompleteField" required>

    <div class="messages" ng-messages="autocompleteForm.autocompleteField.$error">
      <span class="help-block" ng-message="required">Please, select the value</span>
    </div>
  </div>
</ng-form>

我使用ng-repeat动态添加此表单。一切 - 形式本身，验证 - 都有效，但有一件烦人的事情：在添加表单之后，它是$ invalid并显示错误消息。不知道为什么会发生这种情况以及如何解决这个问题。添加表单后，这是表单的对象：

{  
   "$error":{  
      "required":[  
         {  
            "$validators":{  

            },
            "$asyncValidators":{  

            },
            "$parsers":[  

            ],
            "$formatters":[  
               null
            ],
            "$viewChangeListeners":[  

            ],
            "$untouched":true,
            "$touched":false,
            "$pristine":true,
            "$dirty":false,
            "$valid":false,
            "$invalid":true,
            "$error":{  
               "required":true
            },
            "$name":"autocompleteField",
            "$options":null
         }
      ]
   },
   "$name":"autocompleteForm",
   "$dirty":false,
   "$pristine":true,
   "$valid":false,
   "$invalid":true,
   "$submitted":false,
   "autocompleteField":{  
      "$validators":{  

      },
      "$asyncValidators":{  

      },
      "$parsers":[  

      ],
      "$formatters":[  
         null
      ],
      "$viewChangeListeners":[  

      ],
      "$untouched":true,
      "$touched":false,
      "$pristine":true,
      "$dirty":false,
      "$valid":false,
      "$invalid":true,
      "$error":{  
         "required":true
      },
      "$name":"autocompleteField",
      "$options":null
   }
}

发现一些关于动态添加的表单（like this one）的博客，他们也有相同的行为。这是默认角度的方式吗？或者有一些选项可以阻止“初始验证”？

Answer 1

您可以在邮件容器上添加ng-if指令，只有在表单提交时才显示：

<div class="messages" ng-messages="autocompleteForm.autocompleteField.$error" ng-if="autocompleteForm.$submitted">
    <span class="help-block" ng-message="required">Please, select the value</span>
</div>

动态添加ng-form和验证

1 个答案: