I've encountered a challenge while trying to create a custom validator for a template-driven form. I'm aiming to constructor inject the NgControl of the host element, which is equipped with an NgModel directive. Unfortunately, I'm consistently running into the following Angular compilation error:
ERROR in : Cannot instantiate cyclic dependency! NgModel ("
<div>
<label for="name">Your name</label>
[ERROR ->]<input id="name" type="text" name="name" #name="ngModel" ngModel [requiredIfCondition]="toggleBool" r")
This is how my directive class is structured:
import { Directive, forwardRef, Injector, Input, Self } from '@angular/core';
import { AbstractControl, NG_VALIDATORS, NgControl, Validator } from '@angular/forms';
@Directive({
selector: '[requiredIf][ngModel]',
providers: [
{ provide: NG_VALIDATORS, useExisting: forwardRef(() => RequiredIfDirective), multi: true },
],
})
export class RequiredIfDirective implements Validator {
private innerRequiredIfCondition: boolean = false;
@Input()
public set requiredIfCondition(val: boolean) {
this.innerRequiredIfCondition = val;
let hostControl: AbstractControl | null = this.ngControl.control;
if (hostControl !== null) {
hostControl.updateValueAndValidity();
}
}
public constructor(@Self() private readonly ngControl: NgControl) {
}
public validate(c: AbstractControl): {[error: string]: string} | null {
if (this.innerRequiredIfCondition && (c.value === null || c.value === '')) {
return {
requiredIf: 'In this context this field is required.',
};
}
return null;
}
}
When implementing the directive, I'm doing it in this manner:
<div>
<label for="name">Your name</label>
<input id="name" type="text" name="name" #name="ngModel" ngModel [requiredIfCondition]="toggleBool" requiredIf />
<div *ngIf="name.errors && name.errors.requiredIf" class="red-text text-darken-3">
Name is required now.
</div>
</div>
I've tried exploring manual injection of NgControl, but due to it being an abstract class, it seems like it's no longer feasible.
Additionally, I attempted to inject AbstractControl instead of NgControl, but encountered a stumbling block as the system couldn't locate a provider for AbstractControl.
The lack of information I could find in relation to template-driven forms has me seeking insights on how to tackle this issue. Any ideas or suggestions would be greatly appreciated.
Thank you, Joshua