Angular Не найден провайдер для NgControl в NodeInjector
Я пытаюсь использовать пользовательский компонент выбора на основе Angular Material в реактивной форме. Вот мой пользовательский компонент выбора:
SelectInputComponent.ts
export class SelectInputComponent implements OnInit {
@Input() data: any;
@Input() label: string;
@Input() optionsKey: any;
@Input() optionsValue: any;
constructor(@Self() public ngCongrol: NgControl) {
this.ngCongrol.valueAccessor = this;
}
ngOnInit() {
}
writeValue(obj: any): void {}
registerOnChange(fn: any): void {}
registerOnTouched(fn: any): void {}
}
Селектинпуткомпонент.html
<mat-form-field class="{{classNamesParent}}" appearance="fill" >
<mat-label>{{label}}</mat-label>
<mat-select value="{{data}}" [formControl]="ngCongrol.control">
<mat-option *ngFor="let option of optionsKey" value="option">
{{optionsValue[option]}}
</mat-option>
</mat-select>
</mat-form-field>
И вот как я использую это в
EditProfileComponent.html
:
<app-select-input [label]='"Gender"' [optionsKey]="enumGenderKeys"
[optionsValue]="enumGenderValues" [data]="member.gender">
</app-select-input>
Должен сказать, что у меня есть еще один пользовательский компонент ввода текста, который объявлен в том же модуле, что и компонент select, но с компонентом ввода текста проблем нет.
Общий модуль.ts
@NgModule({
declarations: [
NavComponent,
SelectInputComponent,
TextInputComponent,
],
imports: [
CommonModule,
RouterModule,
ReactiveFormsModule,
MatDatepickerModule,
MatNativeDateModule,
MatFormFieldModule,
MatInputModule,
MatSelectModule,
MatAutocompleteModule,
],
exports:[
ToastrModule,
NavComponent,
SelectInputComponent,
TextInputComponent,
]
})
export class SharedModule { }
Я получаю следующую ошибку в консоли, и, насколько мне известно, она связана со службами и, в моем случае, с инъекцией
@Self() public ngCongrol: NgControl
в конструкторе причина проблемы.
ядро.js:6498
ERROR Error: NG0201: No provider for NgControl found in NodeInjector. Find more at https://angular.io/errors/NG0201
at throwProviderNotFoundError (core.js:245:1)
at notFoundValueOrThrow (core.js:3329:1)
at lookupTokenUsingModuleInjector (core.js:3364:1)
at getOrCreateInjectable (core.js:3466:1)
at Module.ɵɵdirectiveInject (core.js:14756:1)
at NodeInjectorFactory.SelectInputComponent_Factory [as factory] (select-input.component.ts:10:34)
at getNodeInjectable (core.js:3561:1)
at instantiateAllDirectives (core.js:10298:1)
at createDirectivesInstances (core.js:9647:1)
at ɵɵelementStart (core.js:14900:1)