search

udos86 / ng-dynamic-forms

Rapid form development library for Angular
ISC License
1.32k stars 369 forks source link

Adding custom event on DynamicFormControl #899

Open rernens opened 5 years ago

rernens commented 5 years ago

I'm submitting a


[ ] Bug / Regression
[ ] Feature Request / Proposal
[X] Question

I'm using


NG Dynamic Forms Version: `7.0.1`

[ ] Basic UI
[ ] Bootstrap UI  
[ ] Foundation UI
[ ] Ionic UI
[ ] Kendo UI
[X] Material  
[ ] NG Bootstrap
[ ] Prime NG

Description

I am currently working on multi-step registration form of which the last step is the data entry of an authorization code received by SMS or email.

image

As you can see in the above screenshot, the form contains one field per digit and while this is easy to accomplish with a standard angular reactive form, I have not been able to accomplish the following with ng-dynamic-forms : automatically focus to the next field whenever a digit is entered in a field

I have not been able to find a way to attach a keyup event to each fields either directly or through a directive as @ViewChild/@ViewChildren do not cross the boundaries of the the current view.

Any idea on how to accomplish this keeping using ng-dynamic-forms ?

Suggestions welcome.

Karamuto commented 5 years ago

Hello @rernens ,

this relates to #852 , there is currently no way to access the form controls dom element.

This would still be a preferrable feature I think.

udos86 commented 5 years ago

@rernens Thanks for bringing this one up!

I have not been able to find a way to attach a keyup event to each fields either directly or through a directive as @ViewChild/@ViewChildren do not cross the boundaries of the the current view.

I used to do some experiments on this which came to the same conclusions.

Could you please give some more technical insights here.

rernens commented 5 years ago

@udos86

Hi Udo,

what kind of technical insight would you like ?

udos86 commented 5 years ago

@rernens

Do you know any documentation where this is explained in detail?

@ViewChild/@ViewChildren do not cross the boundaries of the the current view.

rernens commented 5 years ago

@udos86

it is stated in the Angular documentation and I remember having read that in an article that was exploring Angular 6 in depth. Will do some research in my notes and will get back to you with references.

Karamuto commented 5 years ago

Its kind of like stated in this article: https://engineering.datorama.com/accessing-a-components-grandchildren-in-angular-ea15008828ea

Shortly meaning with @ViewChildren/@ContentChildren you can only access the elements defined inside your components template. If you want to access the dom inside your child components you have to relay to tricks.