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 can one overcome CORS policies to retrieve the title of a webpage using JavaScript?

The vertical scrolling functionality of the MUI DataGrid in Safari may occasionally fail to work

Tally up identical words without considering differences in capitalization or extra spaces

How can you effectively declare a computed getter in MobX that aggregates an observable list?

Issue: "The argument provided must be a specific string, not a string or an array of strings."

Is it possible to create a QR Code using Ionic 5?

Struggling with setting up the onChange function in a Next.js application

Fetching an item from Local Storage in Angular 8

Implementing data binding for arrays of inputs in Angular

Tips for passing the same value to two components using vuejs $emit

The default value for the ReturnType<typeof setInterval> in both the browser and node environments

Testing for target instanceof window.Window in jest involves writing a test case using the expect keyword

Angular failing to render data in user interface

Tomcat fails to identify cpho.html and hhpnz.html files as index.html files

Creating a HMAC-SHA-256 signature in JavaScript for datatrans: A step-by-step guide

Refresh a doughnut chart in real-time using NG2Charts

Angular allows cross-origin requests with Access-Control-Allow-Origin

Errors may occur when utilizing TypeScript with the Context Provider API in React

Unable to bind to property as it is not recognized as a valid attribute of the selector component

Cookie-setting isn't functioning properly on Opera and Firefox browsers, but it is working correctly on Postman when using Express