Master Angular Forms: Create Reusable Forms with JSON Constants (Config) | Dynamic Forms in Angular

[@letsprogram30]

Please share your feedback about this video 🙏

[@umeshshelke725]

where is code sir ?

[@elcocodriloazul]

Absolutely love it. Two things that will be interesting in this project to do are validator for two cases. Let say when you select a specific option on a drop down, then you must fill another control. And the second validation that would be interesting to add is for it to check for example that already exist in database ( you can add to a save class to pretend you are saving to a database.) I am very much interested how can this be done using the above validator methods or if its even practical to do so...

[@letsprogram30]

Thanks for the feedback ❤️ Coming to the question, yes brother it is possible and we can add async validation on the fly for the specific control, I will add it to my todo list for upcoming videos 🙂

[@bongguiao]

I really appreciate your swift response sir, Cant wait to see your next video.

[@PAJANI1910]

Excellent Tutorial.. awesome job. Hats off.

[@letsprogram30]

Thanks man!

[@richter9911]

Was very inlightening Thank you. I have a question though if you using a tab option so for example users answers first 3 questions then it switches to a new tab on submit how do you stop the clashing so that it things the submit button

[@abhirajgawai505]

Amazing video sir ❤ Thank you sharing your knowledge.

[@letsprogram30]

Thanks Abhiraj Sir ❤️

[@vinay619]

Nice, with this we can reuse the angular forms

[@letsprogram30]

Yes yes

[@miroslavjakovcic4585]

GREAT video, thnx!

[@letsprogram30]

You’re welcome 😇

[@alexdisd5670]

what a good video, thanks you so much

[@bighneshsamal6523]

Very nice. One question, If I want to change value of one control base on another control change. How to achieve this. We can't write login in dynamic form. We have to manage in parent component. Logics are different in different cases

[@letsprogram30]

I would say there is still a way to achieve it by adding dependson and dependencyMap of values the values will get mapped at the runtime, for example I have a two controls city and state. Based on state selection I will have to populate the cities depedencyMap values something like this. But I should depend on the project to project cases, that do we really gonna use that often, if yes then we should do it generic/centralised way

[@bighneshsamal6523]

Thanks for your quick reply. Adding dependson and depandacyMap in jsondata? Where I can get Full code? I checked your blog, I didn't get Full code.

[@letsprogram30]

@@bighneshsamal6523 It was not the part of the blog/video. If you want I can update the existing code base with some sample code 🙂

[@bongguiao]

This is a great tutorial for a newbies like me, may I know how to config if the the value in the dropdowns came from the database?

[@letsprogram30]

You can load the config on runtime, I might create a video to explain it.

[@prathameshkoyande8984]

Hi Sashi..great tutorial..helped me a lot. Got a silly doubt...the Html code does not show the formGroup or form Controls name in blue. It displays in orange only. Any fix available for that?😅

[@letsprogram30]

maybe that could be something related to your lint? can you share some screenshot to me on discord or telegram

[@manikanta5879]

Great tutorial. Im looking to build a search screen with quick search and advance search options. Quick search is straight forward and i can refer to this tutorial. But advanced search will have multiple sections as expandable ones and with different fields. All these fileds should ve fetched dynamically from json/API and fields vary from text, daterange, date to checkbox and its very confusing

[@letsprogram30]

So there will be two configs basic search config and advance config. The advance config should only have the additional search configs. One use clicks advance button we can destructure it into single config and it should do the job.

[@vinaykumar-be7nm]

can u share the blog link of dynamic form

[@Wellwishers123]

Does the data will be saved somewhere after submit?

[@letsprogram30]

Well it depends on you now, after submit what action you need to perform with that data

[@omverma08]

How can we change the sequence of the field . For example if I want to put select field or radio button between two text field. Thank you so much for video❤❤

[@MalikLuqman-e1g]

hey you use col-md-6 in json data but if we can do that work without bootstrap what's the solution please

[@letsprogram30]

@@MalikLuqman-e1g create your own class with your grid spacing

[@danielpacheco2520]

Great, it helped a lot, I appreciate it

[@letsprogram30]

Thanks mate!

[@sradhanayak4734]

If my application is not standalone, how I can use the dynamic-form-component into the application, suppose I have 4 to 5 different pages in the application? Please suggest

[@letsprogram30]

Declare the component in the shared.module.ts then you can use it in your application just by adding the selected and follow the instructions as per video

[@manojv2893]

Thank you so much

[@letsprogram30]

You’re welcome 😉

[@codewithkholfaa8629]

how to handle files upload and form array

[@mahdiandalib186]

nice man i hope one day you create form builder using angular where users could create form using drag and drop...

[@letsprogram30]

Well, it's a great idea. I accept this as my new challenge 😊 Thanks bro❤

[@mahdiandalib186]

yeees, thx, i am really waiting to see this tutorial where users could select what ever type of form they want from a list of inputs at a sidebar of the page they are for example and then by just drag and drop functionality they could easily add them to their form... something like wordpress gravity forms plugin @@letsprogram30

[@RahmathShan-q4q]

Tried this, but I got error 'Cannot find control with name: 'firstName' '..

[@letsprogram30]

Check the config is mapped correctly and make sure to do all the necessary imports

[@RahmathShan-q4q]

I checked all that , but still showing that binding error for all the fields @@letsprogram30

[@RahmathShan-q4q]

yes I got it ..thanx

[@teja6124]

Hi Sir, Thank you sharing your knowledge. i have question prompt error message “Not allow to select today’s date” if selected date is today. im using below code to prompt error, but failed. can you help on this ? contant file: { "name": "dob", "label": "DOB", "placeholder": "", "class": "col-md-4", "type": "date", //"value" : new Date().toISOString().slice(0, 10), "validators": [ { "validatorName":"required", "required": true, "message" : "*dob is required, Not allow to select today date" } ] }, ts file: if (control.name === 'dob' && myFormControl?.value) { const today = new Date() const selectedDate = new Date(myFormControl?.value); if( selectedDate.getFullYear() === today.getFullYear() && selectedDate.getMonth() === today.getMonth() && selectedDate.getDate() === today.getDate() ){ errorMessage = 'Date of Birth cannot be today'; } }