Question

我有一个使用Bootstrap 4和AngularJS制作的表单，我希望在以下情况下进行简单的表单验证：

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

1

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

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

但是使用Bootstrap 4时，没有“错误”错误。类。我试图使用＆＃39; is-invalid＆＃39;而不是

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

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

2

Bootstrap 4中没有错误消息，只有＆＃39;无效反馈＆＃39;而且我无法根据违反的约束来弄清楚如何更改消息文本。我试过像：

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

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

1 个答案: