Question

我有一个包含一系列输入的表单，以及通过单击按钮添加更多输入的选项。每个输入都是必需的，并且已经有$ .touched验证器，因此如果用户触摸它们，它们就会正确验证。

但是，如果用户没有填写所有现有输入，则单击添加按钮（不表单提交）应阻止添加（完成）更多输入，它应该触发输入上的验证器，以便用户必须填写它们。

我一直无法做到这一点。我很困惑，为什么我不能在ng-click事件中随意激发其他元素的验证。

如果用户未与这些字段进行交互，如何触发按钮点击输入的验证？

Plunker可以大致了解我的意思：http://plnkr.co/edit/LjMz5Ad19izthgKTK6Pi

<input type="text" name="Name" ng-model="editContactsForm.Name" ng-maxlength="100" required />
<small class="error" ng-show="(editContactsForm.Name.$error.required && editContactsForm.Name.$dirty) || (editContactsForm.Name.$error.required  && editContactsForm.Name.$touched)">This is a required field.</small>

<br/>
<input type="text" name="Name2" ng-model="editContactsForm.Name2" ng-maxlength="100" required />
<small class="error" ng-show="(editContactsForm.Name2.$error.required && editContactsForm.ContactTitle.$dirty) || (editContactsForm.Name2.$error.required  && editContactsForm.Name2.$touched)">This is a required field.</small>

Answer 1

首先，我在form上看不到任何plunker，您需要进行手动验证。

您可以使用允许您这样做的$setSubmitted，在您的点击处理程序中，您可以检查表单验证，然后不执行任何操作：

addContent = function(form) {
   form.$setSubmitted();
   if(form.$invalid){
      return;
   }
   ...
}

AngularJS验证：如何在按钮点击时触发验证？

1 个答案: