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

【问题标题】：How to make Angular Forms ngModel classes inherit from Bootstrap Forms classes如何使 Angular Forms ngModel 类继承自 Bootstrap Forms 类
【发布时间】：2016-09-06 05:21:21
【问题描述】：

我正在使用 Bootstrap 4 来设置表单控件的样式，并且想在 Angular 的 ngModel adds CSS classes to forms 时使用 Bootstrap Forms validation 样式，例如 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   */
  }

【问题讨论】：

标签： angularjs twitter-bootstrap css angularjs-directive

【解决方案1】：

在 Angular2 中，您可以使用与 @Tyler 答案相同的方法，但使用新语法。

<div
    class="form-group"
    [ngClass]="{ 'has-success': user.valid, 'has-error': user.invalid}"
>
    <input
        type="text"
        class="form-control"
        id="usr"
        name="usr"
        required
        #user="ngModel"
        [(ngModel)]="model.usr"
    >
</div>

您在#user="ngModel" 行创建一个名为user 的新变量，其中包含用于用户输入的模型状态。使用[ngClass]="{ 'class-name': bool-expression}"，您可以在表达式为真时分配类。

请记住，如果类名不是有效的 JavaScript 标识符（例如，它们有 -），则需要将它们作为字符串。

【讨论】：

【解决方案2】：

我会使用 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

【讨论】：

有效。 .has-danger 类按预期应用。 Bootstrap.css，是否真的改变了表单元素的视觉呈现是另一个问题。