Question

我在创建用于模板驱动形式的自定义验证器时遇到问题。我想构造函数注入host元素的NgControl，它也具有NgModel指令。但是我一直收到以下Angular编译错误：

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")

我的指令类如下：

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

我正在像这样应用指令：

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

我会尝试手动注入NgControl，但是由于它是一个抽象类，我想您不能再这样做了。

我也尝试过注入AbstractControl而不是NgControl，但是系统找不到AbstractControl的提供程序。

在模板驱动表单的上下文中，我似乎找不到更多信息，因此，我非常感谢有关如何解决此问题的任何想法。

预先感谢，约书亚

Answer 1

没有找到解决方案，但是找到了解决方法：通过注入器。

public constructor(
  private injector: Injector
  @Self() private readonly ngControl: NgControl = this.injector.get(NgControl),
) {}

编辑

只需从指令本身中删除提供程序，然后在模块中提供它即可。

Stackblitz

Angular 6-无法在验证程序指令中注入NgControl

1 个答案:

编辑