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

Question

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

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

1.

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

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

但是有了Bootstrap4，就没有'has-error'class了。我试着用 'is-invalid' class 代替

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

但是没有任何反应。我设法让它工作，如 Bootstrap 4 Documentation 中所示，但验证仅在表单提交后发生，而不是在用户触摸输入字段时发生。

2.

Bootstrap 4 中没有错误消息，只有 'invalid-feedback'，我不知道如何根据违反的约束更改消息文本。我试过类似的东西：

<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 所建议的，我的代码没有任何问题。代码不起作用，因为我的表单处于模态 window 中，模态 window 必须在 AngularJS 中有一个单独的控制器才能正常工作。

Answer 1

is-invalid class 是正确的答案你的表格可能还有其他问题所以请查看我下面的演示

注意要测试触摸输入，您必须将焦点放在输入上，然后离开焦点以触发触摸状态

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>

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

Form validation with Bootstrap 4 and AngularJS

twitter-bootstrap

angularjs

twitter-bootstrap-4