From 83b415886851c62402355d6918603a8cad1682d2 Mon Sep 17 00:00:00 2001
From: Uma Das <61022623+CodeWithUma@users.noreply.github.com>
Date: Sat, 1 Oct 2022 21:41:12 +0530
Subject: [PATCH] Add content to Angular Roadmap - Forms (#1973)

* Add content to Angular Roadmap - Forms

* Update content/roadmaps/104-angular/content/106-forms/101-template-driven-forms.md

* Update content/roadmaps/104-angular/content/106-forms/100-reactive-forms.md

Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>
---
 .../content/106-forms/100-reactive-forms.md          | 10 +++++++++-
 .../content/106-forms/101-template-driven-forms.md   | 12 +++++++++++-
 .../roadmaps/104-angular/content/106-forms/readme.md | 12 +++++++++++-
 3 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/content/roadmaps/104-angular/content/106-forms/100-reactive-forms.md b/content/roadmaps/104-angular/content/106-forms/100-reactive-forms.md
index 10ffb066a..f2d47debc 100644
--- a/content/roadmaps/104-angular/content/106-forms/100-reactive-forms.md
+++ b/content/roadmaps/104-angular/content/106-forms/100-reactive-forms.md
@@ -1 +1,9 @@
-# Reactive forms
\ No newline at end of file
+# Reactive Forms
+
+Reactive Forms in angular are those which used to handle the inputs coming from the user. We can define controls by using classes such as FormGroup and FormControl. 
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Documentation' href='https://angular.io/guide/reactive-forms'>Reactive forms - Angular</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.javatpoint.com/angular-reactive-forms'>Angular Reactive Forms</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.digitalocean.com/community/tutorials/angular-reactive-forms-introduction'>How To Use Reactive Forms in Angular</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=8k4ctDmVn7w'>Reactive Form in Angular</BadgeLink>
\ No newline at end of file
diff --git a/content/roadmaps/104-angular/content/106-forms/101-template-driven-forms.md b/content/roadmaps/104-angular/content/106-forms/101-template-driven-forms.md
index 206e64697..bd66873fb 100644
--- a/content/roadmaps/104-angular/content/106-forms/101-template-driven-forms.md
+++ b/content/roadmaps/104-angular/content/106-forms/101-template-driven-forms.md
@@ -1 +1,11 @@
-# Template driven forms
\ No newline at end of file
+# Template Driven Forms
+
+A Template driven form is the simplest form we can build in Angular. It is mainly used for creating simple form application. 
+
+It uses two-way data-binding (ngModel) to create and handle the form components.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Documentation' href='https://angular.io/guide/forms'>Building a template-driven form</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://codecraft.tv/courses/angular/forms/template-driven/'>Template-Driven Forms</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=whr14XxB8-M'>Template driven form</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=cVd4ZCIXprs'>Template driven form Validations</BadgeLink>
\ No newline at end of file
diff --git a/content/roadmaps/104-angular/content/106-forms/readme.md b/content/roadmaps/104-angular/content/106-forms/readme.md
index 4c010a860..0ce99de07 100644
--- a/content/roadmaps/104-angular/content/106-forms/readme.md
+++ b/content/roadmaps/104-angular/content/106-forms/readme.md
@@ -1 +1,11 @@
-# Forms
\ No newline at end of file
+# Forms
+
+Forms are used to handle user inputs in many applications. It enables users from entering sensitive information to performing several data entry tasks.
+
+Angular provides two forms to hadle user inputs: reactive forms and template-driven forms.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Documentation' href='https://angular.io/guide/forms-overview'>Introduction to forms in Angular</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.w3schools.com/angular/angular_forms.asp'>Angular Forms</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=-bGgjgx3fGs'>Angular Forms Tutorial</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=hAaoPOx_oIw'>Building Forms in Angular Apps</BadgeLink>
\ No newline at end of file