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

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

我对每一个控件都进行了验证，即

ng required

，以及其他验证

我有一个提交

按钮

，单击时出现验证错误

我在控件中有无效值，单击submit，启动验证，一切正常。单击“提交”按钮后，如果我尝试添加一个新的节，因为该节具有空值的控件，并且由于表单已提交，验证将触发，默认情况下，我会看到错误消息，这不是一种良好的用户体验，因此有人能帮我避免这种行为吗

请在下面找到我的代码：

<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>

耳标数量
数字必须是正数。
添加更多
下一个

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

为此，在表单字段上提供

$toucted

属性，该属性仅在用户与字段交互时设置为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（即使触摸字段并且没有更改，也为true），而

$toucted

在触摸字段时设置为true，无论值是否更改。

非常感谢您的回答，我对答案完全满意，这也是正确的。但是，我的情况是，我没有任何类型的帮助文本用于每个控件，因此如果我禁用按钮，那么用户将无法理解为什么禁用下一个按钮。是否有一种方法可以显示此场景中的错误。还有，$touch和$pristine有什么不同？