Angularjs 如何使Angle Forms模型类继承自引导窗体类

我正在使用Bootstrap 4设置窗体控件的样式，并希望在Angular的ngModel时使用这些样式，例如

ng valid、ng invalid、ng dirty、ng pending

例如，如果我有以下表格

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

---

我将使用ng类来应用引导类。引导定义应用后类的样式

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

//或者喜欢ng类的对象参数形式
... ng minlength='3'ng class='{
已成功：myForm.input.$valid，
有警告：myForm.input.$error.minlength，
有错误：myForm.input.$error.required}”

---

结帐：

在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

的新变量，行

#user=“ngModel”

，其中包含用户输入的模型状态。使用

[ngClass]=“{'class name'：bool expression}”

可以在表达式变为true时分配类

---

请记住，如果类名称不是有效的JavaScript标识符（例如它们有一个

-

），则需要将它们作为字符串放置。

有效。

.has danger

类按预期应用。是否实际更改表单元素的视觉表示是另一个问题。

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