Question

因此，当在一个被动形式上使用ng-select时，我正试图将这个字段设置为错误（无效），如下所示。

字段：

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

show error方法看起来像这样 - 适用于所有其他表格字段

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

ng select不会更改类。

好像ng-select在表单字段元素的顶部构造一个div，并且将bootstrap类更改为input-sm会暴露这个（所以第二个问题是如何将input-sm应用于ng-select ）

这个CSS isse是使用css绑定显示无效的字段的次要。有没有人解决过这个问题？

Answer 1

1）以下是显示应用的自定义错误类https://plnkr.co/edit/zF6GsJ?p=preview

的plunker示例

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

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

Answer 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;
}

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

Answer 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中包含所有字段格式信息的对象名称。 / p>

我的代码基于Todd Moto的博客文章Configurable Reactive Forms in Angular with dynamic components。推荐的。

ng-select CSS问题，bootstrap input-sm

3 个答案: