Angular does not propagate validation to custom form control ng-select

Question

Angular does not propagate validation to custom form control ng-select

In my Angular 9 application, I am utilizing Reactive Forms with a Custom Form Control.

I have enclosed my ng-select control within the Custom Form Control.

However, I am facing an issue with validation. Even though I have set the formControl to be required, according to the documentation, the ng-invalid css class should be automatically applied to ng-select. But with custom form control, this is not working as expected. The css class is not being set, although the wrapper class is. Can you advise if I am overlooking something or if this is related to a library problem?

Feel free to check out the stackblitz example: https://stackblitz.com/edit/angular-rmvttg-ex63ka?file=src/forms-single-select-example.component.html&fbclid=IwAR2robtd_15khTVhmW59lLhn21HOHl_yYTrCWKaPRmfUt1QVvUn3n8V4Vjo

angular typescript angular-reactive-forms angular-ngselect

Answer 1

Answer №1

One issue with Angular is that it applies the control status CSS classes to your custom control instead of the ng-select within it.

To solve this, you can inject ngControl and check for control.control.invalid and control.control.touched.

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

You can then use something like

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

Another approach is to query the parent's class. By creating a getter like

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

constructor(private element:ElementRef){}

You can use

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

For a simpler solution, wrapping ng-select doesn't require creating a custom form control, just a basic component with an @Input

@Input()control:any

Then you can use it like

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

Check out how easy it is in this StackBlitz example

Answer 2

One issue with Angular is that it applies the control status CSS classes to your custom control instead of the ng-select within it.

To solve this, you can inject ngControl and check for control.control.invalid and control.control.touched.

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

You can then use something like

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

Another approach is to query the parent's class. By creating a getter like

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

constructor(private element:ElementRef){}

You can use

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

For a simpler solution, wrapping ng-select doesn't require creating a custom form control, just a basic component with an @Input

@Input()control:any

Then you can use it like

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

Check out how easy it is in this StackBlitz example

Answer 3

Answer №2

To solve this issue, you can pass the FormGroup as a prop to your subcomponent using Input and then assign it to the ng-select:

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

Subcomponent:

export class MyControlComponent implements ControlValueAccessor {

  @Input() parentFormGroup: FormGroup;
...

Template:

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

Answer 4

To solve this issue, you can pass the FormGroup as a prop to your subcomponent using Input and then assign it to the ng-select:

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

Subcomponent:

export class MyControlComponent implements ControlValueAccessor {

  @Input() parentFormGroup: FormGroup;
...

Template:

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

Angular does not propagate validation to custom form control ng-select

Answer №1

Answer №2

Similar questions

How to execute a function in a child component that is declared in the parent component using Angular

find all the possible combinations of elements from multiple arrays

What causes Enum[Enum.member] to be undefined in the TypeScript playground on codepen.io?

How to Position Logo in the Center of MUI AppBar in React

What type of event does the Input element in material-ui v1 listen for?

You cannot assign an array of 'Contact' objects to a single 'Contact' parameter

Navigating from a Card to a new View in Angular

Ways to update a component upon becoming visible in Angular

What is the best way to declare a collection of objects in TypeScript?

Retrieve the value of a variable to access an object property dynamically in React Native using TypeScript

Is it possible for an object to receive notifications when a component object undergoes changes in Angular 2/4?

Develop a component library for Angular 2 without incorporating inline styles

Using Typescript with Styled-Components and Styled-System: Unable to find a matching overload for this function call

Changes are made to the Angular template-driven form after certain controls have been added or removed

Is it possible to use Firebase auth.user in order to retrieve the signed-in user directly?

Leverage the extended properties of Express.js's Request's generic arguments

When using Angular, automatically shift focus to the next input field by pressing the

Angular material tree with nested branches broken and in disarray

How to call a function within a component from another component without encountering the "Cannot read property" error

There are no route parameters defined