AngularJs 和 Bootstrap 3：表单验证和必填字段答案

【问题标题】：AngularJs & Bootstrap3: Form validation & required fieldAngularJs 和 Bootstrap 3：表单验证和必填字段
【发布时间】：2018-06-25 17:51:20
【问题描述】：

在这里使用 angularjs 1.3 和 Bootstrap 3。

我正在尝试验证我的表单是否为必填字段。我添加了 html5“必需”属性。我还添加了 ng-class 以突出显示错误，但问题是当表单加载我的输入字段时，即 texbox 已经突出显示。我正在寻找的是在按钮单击时突出显示 texbox。我是否必须手动检查并显示错误？

我使用下面的代码：

  <div class="m-grid-col-lg-10" 
       ng-class="{ 'has-error': nameForm.userName.$invalid }">
      <input type="text" name="userName" required ng-model="userName"
             class="form-control input-lg input-small" />
  </div>

按钮点击：

<button class="btn btn-primary" type="button"
        ng-click="done(nameForm.$valid)">
    Done
</button>

JSController 代码：

 $scope.done = function (isValid) {
        if (isValid) {
            $modalInstance.close();
        }
        else {
            return false;
        }
    };

这是一个 jsfiddle：

http://jsfiddle.net/aman1981/a0cLtnpr/7/

【问题讨论】：

标签： angularjs twitter-bootstrap-3 angular-ui-bootstrap

【解决方案1】：

'has-error': nameForm.userName.$invalid && nameForm.userName.$touched

这种方式只有在无效和触摸时才会发生错误，你也可以做或形成。如果你想在提交时触发，以防他们甚至没有触摸它。

更新：

'has-error': nameForm.userName.$invalid && (nameForm.userName.$touched || nameForm.$submitted)

【讨论】：

我在上面添加了 $touched。现在我没有看到我的输入在页面加载时突出显示，但当我单击提交按钮时我也没有看到它突出显示。在页面提交时触发的任何方式。我已经返回 false 所以我认为这可能会触发。另一件事是，当我单击我的文本框然后单击外部时，这有效，我可以看到必填字段错误。
当我点击按钮时没有任何反应。只有当我在文本框内单击时，才会触发验证。使用您的代码查看更新的 jsfiddle：jsfiddle.net/aman1981/a0cLtnpr/10
将按钮设置为 type="submit" 并设置 ng-submit="done(newForm)" （在表单元素上），通常我更喜欢将表单传递给函数并检查表单是否。$在里面有效。但这是一种偏好。如果您不使用 ng-submit 并且 type=submit angular 不知道它是通过单击按钮提交的，那么您可以作弊，并说 newForm.$setSubmitted();然后调用 done()
感谢添加 type="submit" 和 ng-submit 对我有用。
Ng-submit 仅用于表单元素。如果您使用单击按钮调用函数，则需要将表单标记为 form.$setSubmitted() 以触发出现验证错误。