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

Question

我正在使用 Bootstrap 4 来设置表单控件的样式，并希望使用 Bootstrap Forms validation Angular 的 ngModel 时的样式 adds CSS classes to forms ，例如 ng-valid、ng-invalid、ng-dirty、ng-pending。

例如，如果我有如下形式

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

并希望在控件使用 Angular 进行数据验证失败时应用 Bootstrap 的 .has-danger 类(即当 ngModel 添加类 .ng-invalid 时)。我如何完成此操作或达到

的效果

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

Answer 1

我会使用 ng-class 来应用 Bootstrap 类。 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