Angular reactive forms

Описание: In this video we will discuss reactive forms in Angular.

There are 2 ways to create forms in Angular
1. Template Driven Forms
2. Reactive Forms (Also called Model Driven Forms)

Healthy diet is very important for both body and mind. We want to inspire you to cook and eat healthy. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking.
   / @aarvikitchen5572  

Here is the link to Angular CRUD playlist. We discussed Template forms in Part 5.
   • Angular CRUD tutorial  

Text version of the video
http://csharp-video-tutorials.blogspo...

Slides
http://csharp-video-tutorials.blogspo...

Angular 6 Tutorial
   • Angular 6 tutorial for beginners  

Angular 6 Tutorial Text Articles & Slides
http://csharp-video-tutorials.blogspo...

Angular, JavaScript, jQuery, Dot Net & SQL Playlists
https://www.youtube.com/user/kudvenka...

As the name implies, Template Driven Forms are heavy on the template meaning we create the form completely in HTML. Template driven forms are easy to build and understand. They are great for creating simple forms. However, creating complex forms using template driven approach is not recomended as the HTML can get very complicated and messy. It is not easy to unit test template forms as the logic is in the HTML.

Reactive forms on the other hand allow us to build the form completely in code. This is more flexible and has many benefits over template forms. For example, it is easy to add form input elements dynamically and adjust validation at runtime based on the decisions made in code. It is also easy to unit test as most of the logic and validation is in the component class. The only downside of reactive forms is that they require more code than template forms.

In this video and in our upcoming videos we will discuss everything we need to know to build complex reactive forms.

With a reactive form, we create the entire form control tree in the component class code. Let us understand this by creating a simple form with just 2 form controls as shown below.