I have a custom structural directive (appValidatorErrorMessage) what I want to use in input field of reactive forms. I need structural directive because I want to create new, sibling DOM elements next to input tag. My plan is to create a directive which:
- checks validation status
- if input is invalid it adds new class entries (e.g. is-invalid)
- and then generates validation message from FormControl.errors using 'invalid-feedback' class of Bootstap.
Here is input element with directive:
<input type="email" class="form-control" id="email" [formControl]="email" *appValidatorErrorMessage>
Here I want to check validation status so I need to access FormControl. I don't want to pass it as input attribute.
In attribute directives I can achieve it by injecting NgControl in constructor. If I do the same with structural directives
export class ValidatorErrorMessageDirective implements OnInit {
constructor(
private template: TemplateRef<any>,
private container: ViewContainerRef,
private control: NgControl,
) { }
...
I get this error:
NullInjectorError: No provider for NgControl