Extending FormControlDirective in Angular 2+

I am looking at this question while trying to figure out how to extend FormControlDirective: Trying to extend FormControlDirective to implement my own FormControl directive results in an erroneous binding .

There is an answer, but I'm not sure what it meant:

Selectors formControl

\ are formControlName

displayed in one more place - the value of the accessory . For your directive to work, you must implement all of the default accessory values ​​for the directive hybridFormControl

(after the template for inline directives).

Here is my code:

export const formControlBinding: any = {
  provide: NgControl,
  useExisting: forwardRef(() => ControlDirective)
};

@Directive({
  selector: '[appControl]',
  providers: [formControlBinding],
  exportAs: 'ngForm'
})
export class ControlDirective extends FormControlDirective implements OnInit {

  constructor(
    @Optional() @Self() @Inject(NG_VALIDATORS) validators: Array<Validator|ValidatorFn>,
    @Optional() @Self() @Inject(NG_ASYNC_VALIDATORS) asyncValidators: Array<AsyncValidator|AsyncValidatorFn>,
    @Optional() @Self() @Inject(NG_VALUE_ACCESSOR) valueAccessors: ControlValueAccessor[],
    public renderer: Renderer2,
    public hostElement: ElementRef,
  ) {
    super(validators, asyncValidators, valueAccessors);
  }

  @Input() set appControl(form: FormControl) {
    console.log(form);
    this.form = form;
  }
}

      

        
        
        
      

    

It is very similar to @ronif Plunker from his question. set appControl

is executed, although I pass a value of the type <input type="text" class="form-control" appControl="firstName">

, and FormControlDirective._rawValidators

it always seems to be an empty array, although it FormGroup

works with the standard one FormControlDirective

.

How can I use "all default accessors"?