Проверка не распространяется на пользовательский элемент управления формы ng-select в Angular - PullRequest
Новая
       23

Проверка не распространяется на пользовательский элемент управления формы ng-select в Angular

1 голос
/ 28 февраля 2020

Я использую реактивную форму с пользовательским элементом управления формы в своем приложении 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_yYTrCWKaPRmfUt1QVvVjo4 4

Ответы [ 2 ]

2 голосов
/ 29 февраля 2020

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" 
  ...>

Вы можете увидеть в свой разветвленный стек

ПРИМЕЧАНИЕ: В любом случае Чтобы обернуть ng-select, не нужно создавать пользовательский элемент управления формы, просто простой компонент с @ Input 

@Input()control:any

И вы используете 

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

Вы можете видеть, как просто становится в этот еще один стек

1 голос
/ 29 февраля 2020

Вы можете исправить это, передав FormGroup в свой подкомпонент через Input и установив его в ng-select: 

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

Компонент: 

export class MyControlComponent implements ControlValueAccessor {

  @Input() parentFormGroup: FormGroup;
...

Шаблон: 

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