ng-select CSS 问题，引导输入-sm答案

【问题标题】：ng-select CSS issues, bootstrap input-smng-select CSS 问题，引导输入-sm
【发布时间】：2018-02-11 04:27:44
【问题描述】：

因此，在响应式表单上使用 ng-select 时，我正在尝试像这样设置错误（无效）字段的样式。

领域：

<ng-select class="form-control input-sm" [class.store-error]="showError('store')"...

显示错误方法如下所示 - 适用于所有其他表单字段

showError (fieldName: string) {
    const field = this.form.get(fieldName);
    return field.invalid && (field.touched || this.submitAttempted);
}

ng select 不会更改类。

似乎 ng-select 在表单字段元素之上构造了一个 div，并且将引导类更改为 input-sm 会暴露这一点（因此第二个问题是如何将 input-sm 应用于 ng-select )

此 CSS 问题次要于未使用 css-binding 显示无效的字段。有人解决了吗？

【问题讨论】：

标签： angular twitter-bootstrap

【解决方案1】：

1) 这是显示应用的自定义错误类 https://plnkr.co/edit/zF6GsJ?p=preview 的 plunker 示例

2) Bootstrap .form-control 类主要用于原生 html 元素，但是已经有一些样式的自定义元素将无法正常工作，因此您需要自己设置样式。

.form-control.ng-select {
    border: none;
    padding: 0;
}

【讨论】：

我明白了。但是，请注意，如果您添加 .store-error {border:solid thin red; } 到 css，[class.store-error] 绑定没有得到应用......它的 CSS 类绑定不起作用

【解决方案2】：

因为 ng-select 生成 DOM 元素的方式我需要添加一个类来处理引用。

这是站点中使用的类，

.state-error {
    background-color: #ffcccc;
    border-color: #ff0000;
}

这是我需要为 ng-select 添加的类。

.ng-select.state-error .ng-control {
    background-color: #ffcccc;
    border-color: #ff0000;
}

在验证方面所有其他条件都相同 - 这对我有用。

【讨论】：

【解决方案3】：

这个问题令人沮丧。我有一个使用“BootStrap v4”的Angular 7 Reactive 表单，包括验证消息。当我使用“ng-select”创建选择或多选表单元素时，样式不一致......呃。通过使用上面的 Andzej Maciusovic 答案解决了我的问题。

这是我使用 ng-select 的反应式模板的外观：

<div
    class="dynamic=field form-input row"
    [formGroup]="group"
>
    <label
        [for]="configData[elementName]"
        class="col-5 my-form-label control-label"
    >
        {{displayField}}
    </label>
    <div class="col-7 ">
        <ng-select
            [id]="configData[elementName]"
            [formControlName]="configData[elementName]"
            class="form-control"
            [ngClass]="((!group.get(configData[elementName]).touched && 
                         group.get(configData[elementName]).pristine) ?
                             'border border-primary' :
                             (group.get(configData[elementName]).errors && 
                              group.get(configData[elementName]).touched) ? 
                                  'is-invalid' : 'is-valid')"
        >
            <ng-option
                *ngFor="let sName of selectData[optionKey];"
                [value]="sName[optionKey]">{{sName[optionDisplay]}}
             </ng-option>
        </ng-select>
        <ng-container *ngFor="let validation of configData[validation];">
            <div class="invalid-feedback"
                *ngIf="group.get(configData[elementName]).hasError(validation.valName.toLocaleLowerCase())
                       && (group.touched || group.valid) ">
                {{validation.valMessage}}
            </div>
        </ng-container>
    </div>
</div>

注意：范围值 elementName、optionKey、optionDisplay 和 validation 是 configData 中包含所有字段格式信息的对象名称。

我的代码基于 Todd Moto 的一篇名为 Configurable Reactive Forms in Angular with dynamic components 的博客文章。受到推崇的。

【讨论】：