angular - 如果输入字段有效，我如何向输入字段添加新的类样式（在 Angular 4 中）

Question

我是 Angular 的新手，我正在研究 Reactive Forms，我还在项目中包含了 Bootstrap，如果输入文本有效并且具有类“ng-valid”，我需要添加类“has-success”到父 div，所以它会变成绿色并采用 Bootstrap 的样式。

Answer 1

尝试这个

<input [ngClass]="{'has-success': true}" />

您可以将组件的任何变量替换为 true

Answer 2

如果你正在使用 ReactiveFormsModule，你可以做这样的事情

在您的组件中：

constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
        myControl: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(4)]],
    });
}

并在您的模板中：

<form [formGroup]="form" novalidate>
    <div [ngClass]="{'has-success': form.controls.myControl.valid}">
        <input formControlName="myControl" type="text"/>
    </div>
</form>

Answer 3

当你只需要设置一个类时，而不是使用ngClass，看起来更容易阅读，像这样设置类

<div [class.has-success]="true">

您可以在其中将 替换为true任何表达式。如果您需要针对您的子元素的帮助，您可以在 fiddle/plnkr 中发布您的 html - 如果您想要一个简单的复制/粘贴答案:)