Reactive Forms in ASP.Net Core 2 and Angular Application

In this post I will explain how to create a form using reactive approach in an Angular and ASP.Net Core 2 web application. The source code of this application is available in GitHub and you can download from here.

There are other posts which explains more about Routing, Reactive Forms, Adding Material and PrimeNG components to the application etc. You can find more details in below links.

Building a Web App using ASP.Net Core 2 and Angular5 Frameworks

How to add Material UI components in ASP.Net Core 2 and Angular Web Application

How to add PrimeNG UI components in ASP.Net Core 2 and Angular Web Application

Reactive Forms in Angular

Angular reactive forms facilitate a reactive style of programming that favors explicit management of the data flowing between a non-UI data model (typically retrieved from a server) and a UI-oriented form model that retains the states and values of the HTML controls on screen.

With reactive forms, you create a tree of Angular form control objects in the component class and bind them to native form control elements in the component template. You create and manipulate form control objects directly in the component class. As the component class has immediate access to both the data model and the form control structure, you can push data model values into the form controls and pull user-changed values back out. The component can observe changes in form control state and react to those changes.

Reactive v/s Template driven Forms

Reactive forms are synchronous while template-driven forms are asynchronous. In reactive forms, you create the entire form control tree in code. You can immediately update a value or drill down through the descendants of the parent form because all controls are always available.

Import ReactiveFormsModule to app.module.ts

Add ReactiveFormsModule to Import Array section of app.module.ts

Create a new component

Add code in employee.component.ts

 

The source code of this application is available in GitHub and you can download from here.

There are other posts which explains more about Routing, Reactive Forms, Adding Material and PrimeNG components to the application etc. You can find more details in below links.

Building a Web App using ASP.Net Core 2 and Angular5 Frameworks

How to add Material UI components in ASP.Net Core 2 and Angular Web Application

How to add PrimeNG UI components in ASP.Net Core 2 and Angular Web Application

 

2 comments on “Reactive Forms in ASP.Net Core 2 and Angular Application”:

Leave a Reply

Your email address will not be published. Required fields are marked *