Attempting to extend FormControlDirective to implement my own FormControl directive results in faulty binding

Question

I'm trying to inverse the way forms controls are registering themselves onto a FormGroup, so that instead of having to

@Component({..., template: `<input [formControl]="myControl"`}    
...

Or

@Component({..., template: `<input [formControName]="myControlName"`}    
...

I could

@Component({..., template: `<input myFormControl`}    
...

And have my directive create and add the FormControl for me.

It is best explained with this Plunker.

What doesn't seem to work is the binding the view to the form model, as you can see, changing the the input does not change the form model value.

Debugging it shows that there are no valueAccessor injected to the constructor (unlike when using the base FormControlDirective class directly).

If you're wondering, my end goal would be that I would have a parent customized group component that would @ViewChildren(MyFormDirective), and dynamically add them all to it's created form.

Answer 1

You are almost there. There is one more trick though. There isn't DefaultValueAccessor for that input element, thus constructor arguments are populate with null value.

The formControl \ formControlName selectors appear in one more place - the value accessor. In order your directive to work you should implement all default value accessors for the hybridFormControl directive ( following the pattern for the built-in directives).

P.S I believe the provider of your directive should be corrected to

providers: [{
    provide: NgControl, //<-- NgControl is the key
    useExisting: forwardRef(() => HybridFormControlDirective)
}]