Error in Directive: NgControl Provider Not Found

I encountered an issue with my Directive while attempting to inject 'NgControl' and received a 'No provider for NgControl' error.

Here is the structure of my File Directory:

app folder
 |--directives folder
        |--myDirective
 |
 |--components folder
        |--events folder
             |--event.module.ts
             |--event1 folder          
                 |--event1.compoenent.html <-- where I use myDirective, which is a reactive form
                 |--event1.component.ts
        
 |--app.module.ts
 |--custom-material.module.ts <-- where I declare my myDirective

This is how my directive looks like:

import { Directive, OnInit, OnDestroy } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({
  selector: "[myDirective]"
})
export class myDirective implements OnInit{

  constructor(public ngControl: NgControl) {}

   ngOnInit(): void {
    this.ngControl.control.valueChanges.subscribe(
      value => {
          console.log('xxx');
      }
    );
  }

}

Here is a snippet from my custom-material.module.ts:

@NgModule({
  imports:      [ FormsModule, ReactiveFormsModule ],
  declarations: [ myDirective ],
  exports: [
    myDirective
  ],
})
export class CustomMaterialModule { 

}

Answer №1

If you're looking for a directive constructor to experiment with, consider this one...

  try using this constructor for your directive: 
constructor(@Optional() @Self() public ngControl: NgControl) {}

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

Data loss occurs when the function malfunctions

Currently, I am working with Angular version 11. In my project, I am utilizing a function from a service to fetch data from an API and display it in a table that I created using the ng generate @angular/material:table command. Client Model export interfac ...

How can an Angular4 unit test disregard an HTML tag from a third-party component?

I've exhausted my resources by checking the docs, SO, and attempting various solutions, but I am unable to make this work. The issue arises when writing a unit test for an angular4 application using karma/jasmine. The test is targeting a component tha ...

Tips for validating and retrieving data from a radio button paired with an input box in reactjs

I'm diving into the world of React and facing a challenge with multiple radio buttons that have associated input fields, like in this image: https://i.stack.imgur.com/Upy3T.png Here's what I need: If a user checks a radio button with a ...

Angular 2's color picker functionality

I'm looking to implement a color picker in my Angular 2 project. I attempted to use the npm library called angular2-color-picker, but after including the directive, all I could see was a blank screen (no errors in the console). Can someone please guid ...

Enhancing the functionality of Angular 2's ngModel directive with the utilization of observables

Working with Angular 2's ngModel directive involves variables and functions, such as: <input [ngModel]="myVar" (ngModelChange)="myFunc($event)" /> I am interested in using BehaviorSubjects instead of variables and functions: ...

Incorporating a picture backdrop into a button element in a React Typescript component

I am working on a React project with TypeScript and using a Material UI library. I am trying to set a background image for a button, but when I use src or imageURL, it gives me a TypeScript error. The CSS style also does not show the picture. Here is my ...

When creating a new instance of a class in Angular, the methods for initialization are not included

I have a User class set up like this: export class User{ id: number = 0; fName: string = ""; lName: string = ""; constructor(){} fullName() { return this.fName + ' ' + this.lName; } email ...

What is the best approach to defining a type for a subclass (such as React.Component) in typescript?

Can someone help me with writing a type definition for react-highlight (class Highlightable)? I want to extend Highlightable and add custom functionality. The original Highlightable JS-class is a subclass of React.Component, so all the methods of React.Com ...

Intercept Axios Responses - Retrieving API Responses for HTTP Statuses that are not in the 200 range

I've set up a custom Axios instance with interceptors for handling responses. As per the Axios documentation, the success interceptor is triggered for 2xx statuses while the error interceptor handles any other status codes. My goal is to show an error ...

What could be the reason for my function throwing a TypeError with the message "<function> is not a function"?

Every time I try to call a function that clearly appears to be defined as a function, I continuously receive the error message: TypeError: [function name] is not a function. To demonstrate the issue, here is a simple example: main.ts import someFunction ...

Developing the headers for a service using React.js

As someone new to ReactJs, I'm curious about the various methods we can use to include Headers in our service Url before making a call. While I'm familiar with how GET/POST Calls are made in angular Js after including headers, I'd like to l ...

Difficulty with the value binding issue on input text produced by *NgFor

When using *ngFor in Angular to loop over an array and generate input text elements bound to the values in the array, I'm encountering some issues. The value is not binding correctly when a user inputs something into the text field. I attempted to ru ...

My Angular custom libraries are having issues with the typing paths. Can anyone help me troubleshoot what I might be doing

After successfully creating my first custom Angular library using ng-packagr, I encountered an issue where the built library contained relative paths specific to my local machine. This posed a problem as these paths would not work for anyone else trying to ...

Creating a cutting-edge object using Angular 4 class - The power of dynamism

Attempting to create a dynamic object within a function, but encountering recognition issues. function1(object: object) { return new object(); } The function is invoked as follows: function1(Test) 'Test' represents a basic Class implementatio ...

The state will reset whenever there is a change in values within an object, but this will only occur if I am

What I'm looking to achieve is this: I need to choose a single card view to edit Once editing is done, I want to save the changes Please refer to the video I've uploaded for clarification and can you please explain why this issue is occurring. ...

Retrieve the generic type parameter of an interface implementation

I am attempting to extract a type parameter from an interface in order to use it as a parameter for a generic function. In my particular scenario, I have the following generic types: interface ITranslatable<T, K extends keyof T> { translations: IT ...

Implementing a more efficient method for incorporating UUIDs into loggers

------------system1.ts user.on('dataReceived',function(data){ uniqueId=generateUniqueId(); system2.processData(uniqueId,data); }); ------System2.ts function processData(u ...

Labeling src library files with namespaces

I have developed a ReactJS website that interacts with a library called analyzejs which was created in another programming language. While I am able to call functions from this library, I do not have much flexibility to modify its contents. Up until now, ...

The functionality of ellipsis, which consists of three dots, allows the text to expand

I am trying to implement a feature where the extra text is represented by three dots (...) as an ellipsis, and upon clicking the dots, the text should expand and contract. However, the current code only contracts the text and does not expand it upon clicki ...

When delving into an object to filter it in Angular 11, results may vary as sometimes it functions correctly while other times

Currently, I am working on implementing a friend logic within my codebase. For instance, two users should be able to become friends with each other. User 1 sends a friend request to User 2 and once accepted, User 2 is notified that someone has added them a ...