Access valid value of custom form control

Question

I created custom component representing password form control (code below is simplified).

PasswordComponent (html)

Answer 1

As we can't get NgControl instance directly from DI system since we'll get a circular dependency error. The following diagram shows why it happens if we inject NgControl in our custom value accessor:

Now it should be clear that we have NgControl -> FormControlName -> ValueAccessor -> CustomValueAccessor -> NgControl circular dependency

To work around it you can leverageInjector to achieve that:

component.ts

import { NgControl } from '@angular/forms';
export class PasswordComponent implements ControlValueAccessor {
  ...
  ngControl: NgControl;

  constructor(private inj: Injector) {
    ...
  }

  ngOnInit() {
    this.ngControl = this.inj.get(NgControl)
  }

template.html

{{ ngControl.control.valid }}

Plunker Example