如何显示 ng-select 的验证状态？答案

【问题标题】：How to show validation state of ng-select?如何显示 ng-select 的验证状态？
【发布时间】：2019-09-17 11:20:55
【问题描述】：

这是一个示例enter link description here

我正在使用 ng-select 并且想要更改边框颜色，无论验证是否错误。

已经这样做了好几个小时了。文档不是很清楚，它只显示 scss 语法而不是 html 语法

【问题讨论】：

查看文档：github.com/ng-select/ng-select#validation-state

标签： css angular sass angular-ngselect

【解决方案1】：

您可以通过以下更改来做到这一点：

component.ts

import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.scss' ],
  encapsulation: ViewEncapsulation.None,  // add this line
})

component.scss

.ng-select.ng-select-opened>.ng-select-container   {
  border-color: #3bff44 !important;
}

.ng-select .ng-select-container{
      border: 1px solid #3bff44;
}

.ng-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container { border: 1px solid #3bff44;}

这里是工作演示：https://stackblitz.com/edit/angular-3p8z8u

【讨论】：

演示如何“工作”？当我点击“变红”按钮时，边框保持绿色：imgur.com/Xq3Cw4c

【解决方案2】：

您的代码中的问题是创建表单时出现语法错误。要将inputBaseUnit formControl 正确初始化为required 字段，请使用以下语法。

this.itemForm = this.fb.group({ 
    inputBaseUnit: ['', [Validators.required]],
});

其中'' 是您的ng-select 的初始值

由于你只有一个Validator，你可以像这样缩短上面的代码

this.itemForm = this.fb.group({ 
    inputBaseUnit: ['', Validators.required],
});

现在，如果您触摸您的选择并单击外部，您将看到您在 css 中添加的黄色边框。

【讨论】：