Question

我今天发现，验证并不总是在我的应用程序中正确显示。在一个特定示例中，如果选择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而只是更改名称。相反，如果有一种方法可以检测角度类并自动添加引导程序等效，那就更好了：

<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

我最终获取了他们的代码并创建了我自己的指令，它只是发出了引导验证类：

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属性确实在做所有的魔术。非常整洁！

角4＆amp; Bootstrap 4 - 整合验证类

1 个答案: