Angular 4 和 Bootstrap 4 - 整合验证类

Question

我今天发现我的应用程序中并不总是正确显示验证。在一个特定示例中，angular 将因 required 而失败。如果<option [ngValue]="null">被选中；但是，浏览器会看到 <option value="0: null">并且不会在 required 上失败.

我想切换到使用 Bootstrap 的服务器端验证类来手动控制何时显示验证:https://getbootstrap.com/docs/4.0/components/forms/#server-side

Angular 有 ng-valid和 ng-invalid Bootstrap 有 is-valid和 is-invalid .我不想复制 bootstrap CSS 而只是更改名称。相反，如果有一种方法可以检测 Angular 类并自动添加 Bootstrap 等效项，那就太好了，就像这样:

<select #s="ngModel"
        id="s"
        name="s"
        [ngModel]="myModel"
        required
        class="form-control"
        [class.is-valid]="s.valid"
        [class.is-invalid]="s.invalid">
    <option [ngValue]="null">Choose a value</option>
    <option *ngFor="let item of items" [ngValue]="item.id">{{item.Name}}</option>
</select>

如果有一种方法可以做到这一点而不需要重复那些[class...]每个输入的属性，那将是理想的。

Answer 1

实际上，我查看了 Angular 源代码，了解它们如何普遍应用 ng-valid 和 ng-invalid。 https://github.com/angular/angular/blob/4.4.5/packages/forms/src/directives/ng_control_status.ts#L38-L57

我最终采用了他们的代码并创建了我自己的指令，它只发出 Bootstrap 验证类:

import { Directive, Self } from "@angular/core";
import { NgControl } from "@angular/forms";

const controlStatusHost = {
    "[class.is-valid]": "ngClassValid",
    "[class.is-invalid]": "ngClassInvalid"
};

@Directive({ selector: "[formControlName],[ngModel],[formControl]", host: controlStatusHost })
export class BSControlStatusDirective {
    public constructor(@Self() private control: NgControl) {
    }

    get ngClassValid(): boolean {
        if (this.control.control == null) {
            return false;
        }
        return this.control.control.valid;
    }

    get ngClassInvalid(): boolean {
        if (this.control.control == null) {
            return false;
        }
        return this.control.control.invalid;;
    }
}

装饰器的 host 属性真正发挥了所有的作用。非常整洁!