如何使Angular Forms ngModel类继承自Bootstrap Forms类

Question

我正在使用Bootstrap 4来设置表单控件的样式,并希望在Angular的ngModel 向表单添加CSS类时使用Bootstrap Forms验证样式,例如.ng-valid, ng-invalid, ng-dirty, ng-pending

例如,如果我有以下表格

 <form novalidate>
     <input type="email" class="form-control" ng-model="user.email" required />
 </form>

并且.has-danger当控件无法使用Angular进行数据验证时(即当ngModel添加类时.ng-invalid),我想要应用Bootstrap的类.我如何实现这一点或其他目的

  input.ng-invalid {
    /* inherit from bootstrap's 
    .form-control-danger   */
  }  

Answer 1

我会使用 ng-class 来应用引导类。Bootstrap 定义了应用后类的样式。

<form name='myForm'>
    <input type="email" name='input' class="form-control" ng-model="user.email" ng-class="myForm.input.$valid ? '' : 'has-danger' " required />
//or get fancy with the object argument form of ng-class
... ng-minlength='3' ng-class="{
      has-success: myForm.input.$valid,
      has-warning: myForm.input.$error.minlength,
      has-error: myForm.input.$error.required}"

结账： https: //docs.angularjs.org/api/ng/directive/form