Question

我有一个带有控件部分的表单。我有一个按钮，可以动态地在表单上添加更多部分。

我对每个控件都进行了验证，例如ng-required和其他验证。

我有一个提交button，我在点击时遇到了验证错误。

我在控件中有无效值并单击“提交”，验证将被触发，一切都很好。如果我尝试添加新的部分，单击提交按钮后，因为该部分具有空值的控件，并且由于表单被提交，验证会激活，默认情况下我会看到错误消息，这不是一个好的用户体验，因此可以有人请帮我避免这种行为？

请在下面找到我的代码：

<div class="row bottom-spaced-large">
        <div class="row">
            <div class="col-md-3">
                Number of ear tags
            </div>
            <div class="col-md-9">
                <input name="txtNumber" tabindex="102" ng-pattern="/^[0-9]*$/" ng-maxlength="50" ng-model="someValue" class="form-control color-black" tabindex="3" />
                <div class="row" style="padding-left: 30px" ng-if="someForm.$submitted && !someForm.txtNumber.$valid">
                    <span style="color: red">Number must be a positive number.</span>
                </div>
            </div>
        </div>
    </div>


<div class="row bottom-spaced-large">
        <button type="button" class="btn btn-primary btn-add" tabindex="101" ng-click="addMore();">Add more<span aria-hidden="true" class="fa fa-plus"></span></button>
    </div>


<button type="submit" class="btn btn-default btn-xs fixed-width" ng-click="doSomething()" tabindex="104">Next</button>

Answer 1

根据标准惯例，您应禁用保存按钮，直到表单有效，并仅在用户与字段交互时显示验证消息（即，当触摸字段时）。

对于此角度，在表单字段上提供$touched属性，仅当用户与字段交互时才设置为true。

因此以下代码将解决您的问题

<input name="txtNumber" tabindex="102" ng-pattern="/^[0-9]*$/" ng-maxlength="50" ng-model="someValue" class="form-control color-black" tabindex="3" />
                <div class="row" style="padding-left: 30px" ng-if="someForm.$submitted && !someForm.txtNumber.$valid">

<div class="row" style="padding-left: 30px" ng-show="someForm.txtNumber.$touched && someForm.txtNumber.$invalid">
  <span style="color: red">Number must be a positive number.</span>
</div>

<button type="submit" ng-disabled="someForm.$invalid" class="btn btn-default btn-xs fixed-width" ng-click="doSomething()" tabindex="104">Next</button>

修改如果要提示用户禁用保存按钮的原因。您可以将以下div放在表单的顶部。

<div ng-show="someForm.$invalid && someForm.$pristine" class="bg-danger"> Please fill the form to continue! </div>
如果没有对表单字段的值进行任何更改，则
$pristine设置为true（即使触摸了字段且未进行任何更改也是如此），而$touched在触摸时设置为true字段无论价值是否改变。

AngularJS中的表单验证和动态控件

1 个答案: