This is really nice to see. I'm working on a large-scale angular project for two years now. And happy to say the whole project runs with this base. This is really coming in handy when you are gonna have many forms in the project. Adding this JSON structure and standard component calling template selectors to the custom code snippets makes the productivity goes high in the sky, believe me. Nice content!
@jaywantnarwade55178 ай бұрын
easy step explanation, covering all scenarios regarding dynamic form . Nice work
@RamShankar-pg9cu3 жыл бұрын
Amazing innovative idea. You can simulate this to generate multiple forms by just defining the json config and load it dynamically. one question is how to specify List and combo boxes and load it from database and setting values to controls from database.
@DavidLopez-dk8il Жыл бұрын
This is a better solution then what I was originally looking for… very nice can’t wait to get back to my desktop and try this out for myself.
@_jn02982 жыл бұрын
i remember doing something like this in a project, it had columns support, something like this [{control}, {control}] it even had selects with server-side options using the async pipe and dynamic formgrups.
@ovuokeaghwotu2389 Жыл бұрын
I love your videos and the additional discussions under every one of them - they have all been very helpful. Please, do your courses Angular have Purchasing Power Parity?
@billblair31552 жыл бұрын
Thank You, Very Much, Joshua. This is exactly what I needed instruction on.
@123vimalan3 жыл бұрын
Thank you so much Joshua. Can’t describe how helpful this is. Great stuff.
@arturkhachatryan632 жыл бұрын
Thank you, today less time spent :)
@davidwang54452 жыл бұрын
Great presentation. Just what I need. Thanks.
@jeevanandam376 Жыл бұрын
Thanks.. Nice video Joshua.. really useful. Could you please upload 1 more video for formArray with events bindings from JSON file configuration ?
@martinjanuschke72743 жыл бұрын
great work! one of the best and "easy to follow" tuts regarding dynamic forms... many thx!
@larryamisola3 жыл бұрын
Wonderful and very useful. Good work.
@OlehBiblyi3 жыл бұрын
Very interesting, thank you!
@davidhorne10172 жыл бұрын
Any tips on linking controls? eg if selecting some options in a multi-select needs to drive a selection in another control, or limits what data is available in the second control
@abdelhakamabdullah4512 Жыл бұрын
Excellent
@ananthakrishnankrishnan72873 жыл бұрын
Just one small help. Given that the HTML is built dynamically, is it possible to control the actual layout? For example first and last name in one row, then email in row 2 etc etc. Given that the Json form data could have anything, how can we control display. The reason behind my question is I want to create a single presentation component for my detail forms which could receive any json array. Is there a way to do this? Also if there is a drop down which needs server data, how can that be accomplished in this design?
@basilirzhak42762 жыл бұрын
thank you ! :)
@fejugaism Жыл бұрын
Have you tried to combine this approach with typed forms?
@balasubramanian9796 Жыл бұрын
Amazing
@TravisSomaroo Жыл бұрын
How would you cater for forms that have nested form groups?
@valeron_1337 Жыл бұрын
10:37 Do we really need to explicitly set the value for any of the inputs in the template ? I think it would only make sense to specify value for options in select if we had one.
@reneshankar3 жыл бұрын
Nice, I am working on a form builder, this would be of great help, thanks!. One question, what is the advantage of this approach over the angular dynamic forms?
@JoshuaMorony3 жыл бұрын
Are you referring to an npm package? No particular advantage/disadvantage to this approach over using a 3rd party library, just depends on what you want/what you're trying to do/preferences etc. I tend to prefer rolling my own solutions if it's simple enough rather than introducing new dependencies into the project.
@alampalli13 жыл бұрын
what if there is a formArray. please cover it.
@chipsmanml2 жыл бұрын
Hi Joshua, may you (or anybody else) give us a hint how we can pass the value type of control from a JSON (string variable) as a generic param of a typed FormControl (Typed forms introduced in A14). Thanks in advance.
@DecentralEyes Жыл бұрын
How would you extend this to include questionnaire data (also stored in a JSON file) where nested one-to-many data exist in the JSON, i.e, an array and a FormArray would be needed in the typescript ?
@QhoirulAnwar3 жыл бұрын
nice tutorial, what if i want to add selection on form?
@shankil29753 жыл бұрын
Excellent video. I am building a similar app @ work for determining product offering based on suitability. Since we have a few products to offer, the JSON structure needs to reflect a decision tree with leaf nodes as the products. While I can use your approach to store questions in JSON, the missing functionality is - How do I render a set of questions based on the answers to one or more questions?
@Edwinil3 жыл бұрын
I going to try to replicate it in stencil/web components. thanks
@Feefor3 жыл бұрын
Thanks Joshua, geat video. How would go about adding fieldsets dynamically into the layout, so you can create accessible sections throughout the form?
@felixlucarodriguezponte6144 Жыл бұрын
Hi Josh amazing video was super helpfull. I am creating an application where I want to generate each page dynamically from a single json that specifies the elements that each view must have. And from this, generate that view with the specific data needed for each one. What is the most optimal way to do this in Angular?
@leonelperez19432 жыл бұрын
Te amo papu!
@pratukale45992 жыл бұрын
Can i pass events dynamically in JsonDataForm and how to call them?
@DecentralEyes Жыл бұрын
How do I style my form to look the same without using ionic ?
@chinchillin2489 Жыл бұрын
I'm having with the Json file. I'm making a different file for my project, but when I try to put the file path of the json into my component for the form, it says my json file can't be found even though its in the project folder. I've been trying to do multiple file paths, but they all give the error. I'm so stuck and confused that it's frustrating.
@edissongabriellopezsalaman97162 жыл бұрын
Hi @Josgua Your video really helped me a lot, thank you. I just have a question about how the push works when it is min and max I see that you only use it in a Button radio, but you access and do not use validators and I do not understand how to use them because currently the form returns true in a number type input, I hope you can help me can you help.
@pawel_html5972 Жыл бұрын
Great but it is really hard to find generating deeper nested reactive forms.
@SA-ie6lr2 жыл бұрын
I tried it in angular in this way but it is not working...May I know the reason or any solution for this problem.
@Danny-er1sf Жыл бұрын
Your using angular material ! I think, if u try without mat ..u will get it right ! Cheers if it helps
@knagaraj59642 жыл бұрын
Hi I'm following your videos. Please provide the video or guide need multiple dynamic form from josn. If click add button create form and update in json also. Please guide.
@fullybangali3 жыл бұрын
how to use material instead of ionic
@JohnnyChauque-d7g Жыл бұрын
With the Dynamic form being loaded from the JSON, how are we going to handle the dropdown(Values), I mean population data into the dropdown and other thing is the conditional forms
@cynthianwakaeme2331 Жыл бұрын
You can define a `type: select` in your JSON FORM, pass in a key-value pair options like this`options: [{key: string, value: string}]`, then use to loop through your options. Obviously this input field would be condtional. (That is, *ngIf = control.type === 'select)'. I hope this helps.
@Thanishqrangampally2 жыл бұрын
@Joshua Morony. If I use ngOnChanges, "Property 'pluginConfigs' comes from an index signature, so it must be accessed with ['pluginConfigs']". Could you kindly let me know what could be the reason, and I do not have a Input variable, I am having an object for my JsonData. Kindly let me know. it would be very helpful. Thank you
@Thanishqrangampally2 жыл бұрын
Could you kindly let me know the best way to reach you personally? Thank you.
@ScottSansoni3 жыл бұрын
Hey mate ... this looks fantastic :-) Would it be valid to make this into a service to be used in any page/feature you want ie so the form controls json could be sourced from an api call, maybe with a fallback to a local json file? And maybe extended so you can specify which forms control file/data you want at the time of use? Would love to see how this could be accomplished ;-)
@JoshuaMorony3 жыл бұрын
Hey Scott, there's no reason specifically that you would need to add a service here. The custom component in the video already supports passing in the JSON form data as an input, so you could grab that data however you wanted (locally or from an API) and pass it into the component. And you could certainly also add more inputs to the component if you wanted to allow more fine grained control over things.
@ScottSansoni3 жыл бұрын
@@JoshuaMorony thanks Josh that makes sense. Will give it a go today :-)
@designersperspective2 жыл бұрын
Hello, everything is working fine until I render form inputs dynamically in the template. I get a bunch of errors. mainly: Property formGroup is not provided by any applicable directives nor by form element Event ngSubmit is not emitted by any applicable directives nor by form element No directive is matched on attribute ngFor/ngIf and so on... Maybe you've got a solution? I need to hand in an app for university and I am kind of lost ...
@bhanuprakashreddy4834 Жыл бұрын
This Reactive form Wrapper component is amazing but what if this controls have child and grandchild forgroups & formarrays 😢
@yunus5949 Жыл бұрын
I wonder how they do the job of creating forms for thousands of products with various features on e-commerce sites like aliexpress or amazon. Are they using something like this?