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

Setting Bootstrap Error Class via AngularJS on Form Submit?

本文关键字：设置 Bootstrap 错误 AngularJS Form Submit      更新时间：2023-09-26

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

我可以很容易地在常量基础上设置错误状态。如本文所述，我使用以下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状态的任何表单字段，但仅在该表单提交之后?

您可以创建一个默认为false的作用域变量来跟踪按钮何时被单击。

$scope.formSubmitted = false

在你的表单上添加一个ng-submit指令来将条件更改为true。

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

现在改变ng类条件:

ng-class="{ error: date.isInvalid && formSubmitted }"
相关文章：