使用 Bootstrap 4 和 AngularJS 进行表单验证

Question

我有一个用 Bootstrap 4 和 AngularJS 制作的表单，我想在可能的地方做一个简单的表单验证：

1. 在用户触摸输入字段后验证输入字段，
2. 根据验证约束显示两种不同的错误消息，
3. 创建自定义验证约束（例如比较密码和密码确认字段）。

1.

在以前版本的 Bootstrap 中，您可以执行以下操作：

<div class="form-group" ng-class="{'has-error': userForm.email.$invalid && userForm.email.$touched}">

但在 Bootstrap 4 中，没有“has-error”类。我尝试改用“is-invalid”类

<div class="form-group" ng-class="{'is-invalid': userForm.email.$invalid && userForm.email.$touched}">

但什么也没发生。我设法使它像Bootstrap 4 Documentation 中所示的那样工作，但验证仅在表单提交后发生，而不是在用户触摸输入字段时发生。

2.

Bootstrap 4 中没有错误消息，只有“无效反馈”，我不知道如何根据违反哪个约束来更改消息文本。我试过类似的东西：

<div class="invalid-feedback">
    <p ng-show="userForm.email.$error.required">Required</p>
    <p ng-show="userForm.email.$error.email">Enter a valid email</p>
</div>

但这不起作用。

3.

我尝试制作一个 Angular 指令，但因为 1. 和 2. 不起作用，我无法对此进行测试。

任何帮助将不胜感激。

更新

正如 Peter Wilson 所建议的，我的代码没有任何问题。代码不起作用，因为我的表单位于模态窗口中，并且模态窗口必须在 AngularJS 中有一个单独的控制器才能正常工作。

Answer 1

is-invalid 类是正确答案，您的表单可能还有其他问题，请查看我的以下演示

注意要测试触摸输入，您必须专注于输入，然后离开焦点以触发触摸状态

angular.module('myApp',[])
.controller('myCtrl',function(){
  
})

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
<div ng-app="myApp" class="container">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div  ng-controller="myCtrl" class="container">
  <form name="loginForm" novalidate>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" ng-model="email"  required class="form-control" name="email" ng-class="{'is-invalid':loginForm.email.$error.required && loginForm.email.$touched}" placeholder="Enter email">
    <small ng-show="loginForm.email.$error.required && loginForm.email.$touched" id="emailHelp" class="form-text text-danger">email is required.</small>
  </div>

 
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

</div>