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:

Connect with me on the below Social links:

Angular Chat App

MEAN stack AUTH Series

Angular Signals

Angular 14 Login and Signup Page | Part 1

Angular 14 Form Validation| Part 2

Login & Signup API creation & integration with Angular | Part 3

Encrypt Password in .NET 6 | Password strength checker in Angular

Angular Authentication with Hashed Password | Part 5

Create JWT token in .NET 6 | Angular + .NET authentication | Part 6

Implement JWT token in Angular 14| Interceptors in Angular | Part 7

Angular News Application

Crypto Currency Application

Angular TODO Application

#Angular #WebDevelopment #Coding #Forms #JSONConfig #DynamicForms

Angular 13 CRUD using Material UI

Angular QUIZ Application

Angular Add-to-cart app

[letsprogram]

Please share your feedback about this video 🙏

[bongguiao]

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

[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...

[PAJANI]

Excellent Tutorial.. awesome job. Hats off.

[abhirajgawai]

Amazing video sir ❤
Thank you sharing your knowledge.

[vinay]

Nice, with this we can reuse the angular forms

[danielpacheco]

Great, it helped a lot, I appreciate it

[richter]

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

[omverma]

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

[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?

[manikanta]

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

[bighneshsamal]

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

[mahdiandalib]

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

[sradhanayak]

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

[codewithkholfaa]

how to handle files upload and form array

[mcgsekr]

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

[teja]

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';
}
}