DynamicFormsInstanceService & support for additional form field components

[Karamuto]

As this was requested now a few times, I sat down and created a service which allows to retrieve the ComponentRef of a form model object.

This will hopefully provide a way to solve some of the issues like #899 , #852, #806

How to use:

First the service needs to be provided, this can be done either by using the 'forRoot()' on the CoreModule, or by simply providing it in a module or at component level. This also means for people not using 'forRoot()' this be a breaking change as they has to provide it additionally.

Next you inject the service in any component and/or service the name is as stated : 'DynamicFormsInstanceService'

After the view has inialized ( ngAfterViewInit ), one is able to call 'getFormControlInstance(modelId: string, index?: number)'. This will return a ComponentRef to the DynamicFormControl with the given id ( and index for form array elements ).

One thing which can cause issues here is if the same id is used multiple times ( except for FormArrays ), but this can solved by seperating elements with the same id into different components/modules and providing the service additionally for this components/modules.

Edit: Also added support for an 'isFormFieldControl' property in 'additional'. This allows for to mark a model as form field control and is useful when adding own material form field controls, but don't override existing ones.

[coveralls]

Coverage decreased (-0.006%) to 94.902% when pulling 3958fe9 on Karamuto:development into 147edf2 on udos86:development.

[regstar]

Hello @Karamuto

Thx for your merge. I had tested this new service and it works, but i am unable to set the focus to the element ref i get back from the service.

E.g.

this.dynamicFormInstanceService.getFormControlInstance("my_id_dynamic_form").location.nativeElement

I will get the complete control with all parent divs.

How do you use this service to set up the focus on the control?

Thx for your help

[Karamuto]

Hello @regstar ,

its actually a little weird in you case ( ng-bootstrap? ) you could place a class on the form control you want to focus ( or maybe use the tagname if sufficient ) and make something like this:

const htmlEl: HTMLElement = this.dynamicFormInstanceService.getFormControlInstance("my_id_dynamic_form").location.nativeElement;
// or by tagname
const matches = htmlEl.getElementsByClassName('form-control-class');

That last will return a node list, which should contain you form control, then you can use the focus() method to let the browser fucos on this control.

I hope it helps

[regstar]

Hello @Karamuto

On which version I can find this service? I could not find this service on the version 7.2+. Cannot find this on dev branch, too.

Can get me some information about this? Thanks!

[Karamuto]

Hello @regstar ,

as it seems the service was renamed in newer version to DynamicFormComponentService.

[regstar]

Ah okay thanks. I did not pay attention to that. I will test this service. Thanks for your help on this.

[regstar]

Okay found it now. But I need to upgrade to ng-dynamic-forms 8+. Is this compatible with angular 7?

[CAlex-Wilson]

@Karamuto I recently stumbled upon this while trying to set focus manually. I have this:

form.formGroup.reset();
const typeInput: HTMLElement = this._dynamicFormComponentService.getFormControlRef("Type").location.nativeElement;
console.log(typeNameInput);
// This does grab the correct control.
typeInput.focus()

Even though it has done its job and grabbed me the HTMLElement, focus() does not work. Am I missing a step? My form is located inside of a Material Dialog, if that matters.

[Karamuto]

Hello @CAlex-Wilson,

could you provide what kind of Form Control you were trying to focus?

Maybe even a little stackblitz would be really helpful.

Greetings

[CAlex-Wilson]

Greetings @Karamuto,

Thanks for the fast response! I am using a DynamicInputModel and I will begin setting up a stackblitz now.

[CAlex-Wilson]

@Karamuto,

Here is the StackBlitz: Blitz

[Karamuto]

Hi @CAlex-Wilson,

sadly some things seem to have changed since I made this feature.

If you want to focues this input, you need to do it like I changed in the stackblitz. We need to use the instance and focus the matInput in there.

[CAlex-Wilson]

Hi @Karamuto,

I don't see any differences on your version of the stackblitz. Am I missing it?

[cufeo]

Hi @Karamuto can you please provide an example of how to do it properly ?