2

用户提交表单后如何高效设置多个表单域的错误状态？

我可以很容易地持续设置错误状态。如该线程中所述，我使用以下 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状态下的任何表单字段，但仅在提交该表单之后？

4

1 回答 1

1

您可以创建一个默认为 false 的范围变量，该变量在单击按钮时进行跟踪。

$scope.formSubmitted = false

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

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

现在更改 ng 类条件：

ng-class="{ error: date.isInvalid && formSubmitted }"
于 2013-05-03T00:34:54.697 回答