Angular 2 - issue with custom control validator not properly matching nested controls

Having a strange issue with validating my customized template-driven form control. I'm struggling to make the "required" validator work as expected, even after spending hours trying different solutions.

The control in question is essentially a wrapper for a 3rd party autocomplete component. I am aiming to make this entire component mandatory, meaning that its value must be defined and not null. However, simply adding the required directive like this...

<my-control ... required></my-control>

results in the required validator only checking the content of a text-input within the nested autocomplete control. Although binding the value (ngModel) of my control displays the correct value, it seems that the validator does not recognize it.

I also attempted to create a custom validator, but encountered the same issue. Even when monitoring the value property of the FormControl passed to the validator, I could only see the value entered into the text-input located deep within the nesting structure.

Answer №1

After some investigation, I found the solution to my issue - by adding the ValueAccessor configuration in the providers section of the Component decorator. It appears that the binding looks for the first value accessor with this setup. Since mine was not included, it searched further and ended up matching the one associated with the autocomplete input.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble retrieving files from an Angular2 service

I am facing an issue in creating an Angular2 service for downloading files from the server. I have a table where each record represents a single file. When clicking on a specific record, the download method is called: download(r: FileObject) { this.re ...

Navigating through nested objects in a combined type

Is there a way to create a function that can take an object (which is part of a union) with a specified path and return the value of the config object for that specific path? I've been attempting the following: type Cat = { config: { meow: stri ...

Troubleshooting radio name input binding in Angular 2

In Angular2, there seems to be an issue with one-way binding to the name attribute for a group of radio inputs. For example: <div [ngFormModel]="form"> <input type="radio" [name]="varName" [id]="id1" ngControl="r1"> <input type="radio" ...

What is the best way to retrieve the elements within a third-party selector?

Within the same package, I am working with a selector called "own date picker." This selector includes a "div" element that contains an "input" field. I need to modify the CSS of this input field, but cannot directly access it in my project because it is p ...

Angular Word add-in for locating and highlighting text

I am struggling to enhance the functionality of a word add-in by implementing new features. If anyone can provide assistance, it would be greatly appreciated :) The current challenge I am facing is related to a button in the add-in. When this button is cl ...

Trigger a function upon a user's departure from a page or route in Angular 2

Is there a way to trigger a function only when the current route changes away from a specific component, such as when navigating away from "..../user/user-details"? I want this method to execute regardless of whether the route is changed through user inter ...

Connect a function in Angular 2 and above

I am currently working with AgGrid and I would like to implement localization. To achieve this, I have included [localeTextFunc]="localeTextFunc" within my <ag-grid-angular HERE></ag-grid-angular> In my TypeScript file, I have the following c ...

What is the process for exporting the reducer function and integrating it into the storeModule.forRoot within an Angular application?

Recently, I started delving into ngrx and decided to educate myself by going through the official documentation on their website ngrx.io. During this exploration, I came across a puzzling piece of code in one of their reducers. The file in question is cou ...

Set the style of the mat-select element

I'm having an issue with my select option in Angular Material. The options look fine, but when I select one, the strong tag disappears. Can anyone help me style only that part? Thank you in advance. <mat-select formControlName="projectId" ...

An error occurred while trying to upload the image: Undefined property 'subscribe' cannot be read

Recently, I implemented a create post function that allows users to fill in the title, content, and upload an image. However, I encountered an issue where the progress bar fills up and the image gets uploaded to Firebase successfully, but it doesn't a ...

The concept of 'this' in TypeScript classes compared to JavaScript's scope

Is there a way to change the custom icon of a video when it is toggled between Play and Pause? ngAfterViewInit() { const vdoCont = document.querySelector('.video-player'); const vdo = vdoCont.querySelector('video'); vdo.addEventL ...

Determining a value that increases to yield a fresh sum

I'm currently developing a character generator that determines your score based on the experience points you allocate to it. The scoring system is such that 1 XP gives you a score of 1, 3 XP gives you a score of 2, 6 XP gives you a score of 3, 10 XP g ...

How can I retrieve a certain type of object property in TypeScript?

Imagine having a collection of flags stored in an object like the example below: type Flags = { flag1: string, flag2: string, flag3: boolean, flag4: number } // const myFlags: Flags = { // flag1: 'value 1', // flag2: 'value 1&ap ...

I am facing issues with my filtering functionality on the Angular Typescript mat-table component

I am facing issues while trying to filter my table, the reaction is not correct and I can't seem to find where I went wrong. Here is the HTML part : <mat-form-field appearance="outline"> <mat-label>Search</mat-label> & ...

What methods can be used to resolve errors stemming from nesting classes within classes in TypeScript?

My experience with TypeScript is limited, and I'm facing an issue. The code appears as follows: 1) Main.ts: import gpbApi from '@/utils/api/gpbApi'; @Component export default class ExtendedDetailAccountComponent extends mixins(CurrentUserM ...

What is the best way to adjust the padding within a mat-expansion-panel-body?

I recently created an expansion panel that is working well, but I am having trouble removing a padding from the subpanel section. Despite my efforts, I haven't been able to find a suitable solution. Here's a link to the panel image: https://i.ss ...

What is the best way to output data to the console from an observable subscription?

I was working with a simple function that is part of a service and returns an observable containing an object: private someData; getDataStream(): Observable<any> { return Observable.of(this.someData); } I decided to subscribe to this funct ...

Angular 5 Custom validators: Error message - 'passwordG' is not defined in ng

Currently working with Angular 5 and attempting to create custom validators for password inputs along with a confirmation password field. This is the HTML code : <div formGroupName = "passwordG"> <div class="form-group"> <label ...

It seems that you have mistakenly input 'undefined' instead of a stream where a stream was required, resulting in an error in the

I have browsed through various threads discussing the same issue, but unfortunately, none of them provided a solution. As a newcomer to angular technology, I am currently using angular 11. My goal is to refresh the JWT token within the HttpInterceptor clas ...

Angular 11 - How $rootScope Behaves When Navigating in a Hybrid AngularJS Environment

I have been in the process of transitioning a sizable AngularJS application to Angular 11. Thus far, I have successfully reworked the sign-in and sign-up pages in Angular 11. Post authentication, the AngularJS app is lazily loaded as shown below: const rou ...