Reuse ngControl object?

[gaiottino]

Hi,

I'm trying to create some custom form components and I've figured out how to implement ControlValueAccessor to be able to use ngModel, ngControl and ngFormControl in my custom components.

However, how can I access the form control which is bound to my custom component? I've created a small plnkr to highlight the problem.
http://plnkr.co/edit/nlnpBjNkifow2M0MXkdr?p=preview

Since I set Validators.required in my ControlGroup, I want my custom-input to reuse the control from the ControlGroup.

I've tried to get a handle to from NgControl, but the external control is not available until ngAfterViewInit which is too late to create innerControl. Ideally, in this case I wouldn't want to have innerControl at all since I'm in this case just wrapping <input>. But in a more advanced custom form component, I'd like to get hold of the validators and pass them to multiple Control objects in my custom component.

Any way to simplify creating a custom form control that's able to use ngModel, ngControl and ngFormControl or am I correct in implementing ControlValueAccessor?

Thanks,

• Daniel

[gaiottino]

Since I haven't received an answer I'm assuming that there isn't an easy fix to this or that I should rethink creating custom form controls? The examples I've found so far don't wrap anything very complex so they haven't been enough for me to figure this out properly. I could make it work by passing in a control so I can use it and get hold of it's validators, but I'd prefer to make it compatible for ngModel, ngControl and ngFormControl so it's easy to use in a form i.e. creating a form control that wraps a javascript select box such as selectize.

[zoechi]

I looked a while into your Plunker but wasn't able to figure out what purpose reusing ngControl should fulfill or what you try to accomplish by resuing ngControl.

[gaiottino]

@zoechi thanks for your response. My plunker is oversimplified but it still highlights the "problem". If you look at the DOM, for the first input field, the input-field has class ng-valid even though custom-input has ng-invalid which is what I want to achieve since I've added Validators.required to my control.

My goal is to be able to wrap mode complex html to make reusable simple controls such as

<labeled-input ngControl="control" label="Firstname"></labeled-input>

which could be a control with template

<label>{{label}}</label>
<input ngControl="control">

This is again an oversimplification but maybe it explains more. I also want to create a control that required two input fields, and that returns a custom value but I want to see what validations were set on the custom control.

Thanks.

[Drol]

I also want to access the FormControl inside my ControlValueAccessor component. The reason is that I want to display validation errors inside the component itself. Basically any validation errors from any validator that is registered on the FormControl wherever it was created.

I can make that happen passin in the the FormControl to the custom component inplementing ControlValueAccess. But why should you have to do that?

[pkozlowski-opensource]

However, how can I access the form control which is bound to my custom component? I've created a small plnkr to highlight the problem.

Each form-related directive (ngModel, formControl, formControlName) publishes NgControl token in the DI. This token is available in the Injector associated with the given DOM element. So if you must access control you can:

• inject Injector into your ControlValueAccessor impl
• from the injector you can get the control instance by doing this._injector.get(NgControl).control

Here is a mini-example in a plunker: https://plnkr.co/edit/Mxe3vuk8KQt5DchPQhVY?p=preview (check the writeValue method where the control is accessed).

Please note that you can't inject NgControl directly as it would create cyclic dependency.

I perfectly understand that the above is not-trivial and requires some deep-internals knowledge. We could potentially make it simpler / more obvious but TBH I didn't quite understand the use cases you've got so I'm not sure how common the scenario is.

I'm going to close this one as there is a way of achieving what you are asking for (albeit not trivial). Feel free to continue the discussion in here so we can re-open this issue if more needs surface.

[pmowrer]

I can second @Drol's use-case. An example is a date picker component that disables selecting dates that fall outside of the validation rules (and/or provides visual queues). Grabbing the validator function via the NgControl feels dirty, but haven't been able to find another way of doing this.

[e-cloud]

In fact, i wonder why it causes cyclic dependency. Here is a similar SO Question

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}