Angular 10：在 Angular Material 自定义表单字段控件中访问 NgControl

Question

I am trying to access NgControl within a custom Angular Material Form Field Control :

constructor(
    @Self() @Optional() public ngControl: NgControl,
    private fb: FormBuilder,
    private fm: FocusMonitor,
    private elRef: ElementRef<HTMLElement>
  ) {
    this.createForm();

    console.log('<< ', this.ngControl);
    if (this.ngControl != null) {
      this.ngControl.valueAccessor = this;
    }

    fm.monitor(elRef.nativeElement, true).subscribe(origin => {
      this.focused = !!origin;
      this.stateChanges.next();
    });
  }

But when I do this the interface where I use the component is blank, no errors! When I remove the NgControl from the constructor the view is rendered.

Is that the way to inject NgControl?

Thanks in advance.

Answer 1

Injecting ngControl directly in constructor causes cyclic dependency. Can be avoided by doing this:

constructor(
    private injector: Injector,
    ...
  ) {
    ...
  }

ngOnInit(): void {
    this.ngControl = this.injector.get(NgControl);
  }