验证不会传播到 Angular 中的自定义表单控件 ng-select

我在 Angular 9 应用程序中使用带有自定义表单控件的响应式表单。

我包裹了我的ng-选择 https://github.com/ng-select/ng-select使用自定义表单控件进行控制。

我在验证方面遇到问题。我将 formControl 设置为必需。文件说 https://github.com/ng-select/ng-select#validation-state that ng-invalidcss 类应自动设置为 ng-select。但实际上使用自定义表单控件它无法正常工作。 css 类未设置，但包装器类已设置。我做错了什么还是这是图书馆的问题？

检查堆栈闪电战：

DiPix，问题是 Angular 将控件状态 CSS 类添加到您的自定义控件，而不是属于您内部控件的 ng-select

您可以注入 ngControl 并检查 control.control.invalid 和 control.control.touched

constructor(private injector:Injector){}
ngOnInit()
{
   this.control = this.injector.get(NgControl);
}

那么你可以使用一些像

  <ng-select #mySelect  [ngClass]="{'ng-invalid':control?.control.invalid,
                                    'ng-touched':control?.control.touched}"
   ....>

另一种方法是询问家长的班级。所以如果你定义一个像这样的吸气剂

get parentClass()
{
  const match = /class=\"(.*?)\">/.exec(this.element.nativeElement.parentElement.innerHTML);
  return match[0].split('"')[1]
}

constructor(private element:ElementRef){}

您可以使用

<ng-select #mySelect  [ngClass]="parentClass" 
  ...>

你可以看到在你的分叉 stackblitz https://stackblitz.com/edit/angular-rmvttg-3d6aad?file=src%2Fmy-control%2Fmy-control.component.html

注意：无论如何，要包装 ng-select，不需要创建自定义表单控件，只需一个简单组件带有@Input

@Input()control:any

你用作为

    <mycontrol [control]="someForm.get('someControl')"></mycontrol>

你可以看到变得多么简单这是另一个堆栈闪电战 https://stackblitz.com/edit/angular-rmvttg-njxgck?file=src%2Fforms-single-select-example.component.html