Angular 10: Access NgControl in an Angular Material custom form field control

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.

Conde · Accepted Answer · 2020-09-11 01:59:17Z

0

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

answered Sep 11, 2020 at 1:59

Conde

95117 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 10: Access NgControl in an Angular Material custom form field control

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related