在Form Submit上通过AngularJS设置Bootstrap错误类？

Question

如何在用户提交表单后有效设置多个表单字段的错误状态？

我可以在不断的基础上轻松设置错误状态。如this thread中所述，我使用以下HTML代码：

<div class="control-group" ng-class="{ error: groupForm.textbox_Group.$invalid }">
  <label class="control-label" for="textbox_Group"><i class="icon-home"></i> Organization</label>
  <div class="controls controls-row">
    <input type="text" class="span6" id="textbox_Group" name="textbox_Group" placeholder="Organization" ng-model="org" required>
  </div>
</div>

我的问题是它会在页面加载时立即出现在错误状态。我希望它在用户点击提交之前显示正常，然后，只有在$invalid被标记时才会显示。

我目前正在使用单独的标志，如下所示：

<div class="control-group" ng-class="{ error: group.isInvalid }">
  <!-- snip -->
</div>

<div class="control-group" ng-class="{ error: date.isInvalid }">
  <!-- snip -->
</div>

它有效，但对我来说似乎很臃肿。是否有更简化的方式来标记$invalid状态中的任何表单字段，但只有在提交该表单之后？

Answer 1

您可以创建一个默认为false的范围变量，用于跟踪单击按钮的时间。

$scope.formSubmitted = false

在表单上添加ng-submit指令以将条件更改为true。

<form name='myForm' ng-submit="formSubmitted=true" >

现在更改ng类条件：

ng-class="{ error: date.isInvalid && formSubmitted }"