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

🚀 Welcome to a web development revolution! In this tutorial, we're diving deep into Angular Forms, showing you how to create dynamic, reusable forms using JSON constants (config). 📋
🤩 Get ready to master Angular Forms, whether you're a beginner or a seasoned pro. We'll guide you through the entire process, step by step. No more struggling with complex coding - we've got you covered!
🧩 Learn how to leverage the power of JSON configuration to make your forms adapt to your needs. 🧠
💡 Unlock time-saving techniques that will supercharge your web development projects. We're here to simplify the complex and boost your coding skills.
💻 Subscribe now, hit that notification bell, and let's embark on this exciting journey to create dynamic forms in Angular. Get ready to take your web development to the next level! 🎯🌐
📢 Connect with us on social media for more exciting tutorials and updates:
Support me: / letsprogram
Connect with me on the below Social links:
Let's Program Blog: letsprogram.in/
KZread: / @letsprogram30
Instagram: / lets.program
LinkedIn: / sashikumar-yadav
Telegram: t.me/letsprogramYt
Twitter: / yshashi30
Angular Chat App
• Create Chat Applicatio...
MEAN stack AUTH Series
• MEAN stack project set...
Angular Signals
• Signals in Angular | H...
Angular 14 Login and Signup Page | Part 1
• Angular 14 Login and S...
Angular 14 Form Validation| Part 2
• Angular 14 Reactive Fo...
Login & Signup API creation & integration with Angular | Part 3
• Login and Signup using...
Encrypt Password in .NET 6 | Password strength checker in Angular
• Encrypt Password in .N...
Angular Authentication with Hashed Password | Part 5
• Angular Authentication...
Create JWT token in .NET 6 | Angular + .NET authentication | Part 6
• Create JWT token in .N...
Implement JWT token in Angular 14| Interceptors in Angular | Part 7
• Implement JWT token in...
Angular News Application
• Angular 14 News Applic...
Crypto Currency Application
• Angular Project - Cryp...
Angular TODO Application
• TODO Application in An...
#Angular #WebDevelopment #Coding #Forms #JSONConfig #DynamicForms
Angular 13 CRUD using Material UI
• Angular 13 CRUD with A...
Angular QUIZ Application
• Angular 12 Quiz Applic...
Angular Add-to-cart app
• Add to Cart in Angular...

Пікірлер: 38

  • @letsprogram30
    @letsprogram307 ай бұрын

    Please share your feedback about this video 🙏

  • @bongguiao
    @bongguiaoАй бұрын

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

  • @PAJANI1910
    @PAJANI19105 ай бұрын

    Excellent Tutorial.. awesome job. Hats off.

  • @letsprogram30

    @letsprogram30

    5 ай бұрын

    Thanks man!

  • @elcocodriloazul
    @elcocodriloazul7 ай бұрын

    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

    @letsprogram30

    7 ай бұрын

    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 🙂

  • @abhirajgawai505
    @abhirajgawai5057 ай бұрын

    Amazing video sir ❤ Thank you sharing your knowledge.

  • @letsprogram30

    @letsprogram30

    7 ай бұрын

    Thanks Abhiraj Sir ❤️

  • @vinay619
    @vinay6197 ай бұрын

    Nice, with this we can reuse the angular forms

  • @letsprogram30

    @letsprogram30

    7 ай бұрын

    Yes yes

  • @richter9911
    @richter99112 ай бұрын

    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

  • @miroslavjakovcic4585
    @miroslavjakovcic45854 ай бұрын

    GREAT video, thnx!

  • @letsprogram30

    @letsprogram30

    4 ай бұрын

    You’re welcome 😇

  • @omverma08
    @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❤❤

  • @danielpacheco2520
    @danielpacheco2520Ай бұрын

    Great, it helped a lot, I appreciate it

  • @letsprogram30

    @letsprogram30

    Ай бұрын

    Thanks mate!

  • @manojv2893
    @manojv28935 ай бұрын

    Thank you so much

  • @letsprogram30

    @letsprogram30

    5 ай бұрын

    You’re welcome 😉

  • @bighneshsamal6523
    @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

    @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

    @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

    @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
    @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

    @letsprogram30

    Ай бұрын

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

  • @sradhanayak4734
    @sradhanayak47343 ай бұрын

    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

    @letsprogram30

    3 ай бұрын

    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

  • @manikanta5879
    @manikanta58793 ай бұрын

    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

    @letsprogram30

    3 ай бұрын

    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.

  • @mahdiandalib186
    @mahdiandalib1867 ай бұрын

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

  • @letsprogram30

    @letsprogram30

    7 ай бұрын

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

  • @mahdiandalib186

    @mahdiandalib186

    7 ай бұрын

    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

  • @codewithkholfaa8629
    @codewithkholfaa86292 ай бұрын

    how to handle files upload and form array

  • @user-mc9gs6ek9r
    @user-mc9gs6ek9r7 ай бұрын

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

  • @letsprogram30

    @letsprogram30

    7 ай бұрын

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

  • @user-mc9gs6ek9r

    @user-mc9gs6ek9r

    6 ай бұрын

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

  • @user-mc9gs6ek9r

    @user-mc9gs6ek9r

    6 ай бұрын

    yes I got it ..thanx

  • @teja6124
    @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'; } }