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

Question

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

我用自定义表单控件包装了我的ng-select控件。

我有验证问题。 我将 formControl 设置为必需的。 文档说ng-invalid css 类应该自动设置为 ng-select。 但实际上自定义表单控件无法正常工作。 未设置 css 类，但设置了包装器类。 我做错了什么还是图书馆的问题？

检查堆栈闪电战： https ://stackblitz.com/edit/angular-rmvttg-ex63ka ? file = src/forms-single-select-example.component.html & fbclid = IwAR2robtd_15khTVhmW59lLhn21HOHl_yYTrCWKaPRmfUt1QVvUn3n8

Answer 1

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中看到

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

@Input()control:any

你用作为

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

你可以看到在这另一个 stackblitz 中变得多么简单

Answer 2

您可以通过Input将FormGroup向下传递到您的子组件并将其设置为ng-select来解决此问题：

<mycontrol formControlName="someControl" [parentFormGroup]="someForm" ></mycontrol>

成分：

export class MyControlComponent implements ControlValueAccessor {

  @Input() parentFormGroup: FormGroup;
...

模板：

<ng-select #mySelect
           [formGroup]="parentFormGroup"
...