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 {
}