DotNetCore

Using Angular 2 Reactive forms with ASP.net Core Web API





At some point in every web application there will be a need to collect data from a user and persist it.  Forms are one of the ways we do this.

When we first start out with applications the forms tend to be very basic, but then after a while as the application grows and the data structures we need to populate grow which  leads to our forms becoming increasingly complex.

  • Form inputs are meant to modify data, both on the page and the server
  • Changes often need to be reflected elsewhere on the page
  • You can’t always trust users to input data correctly, so validation is required
  • You need to clearly state expectations and errors
  • Dependent fields can have complex logic
  • You need to be able to repeatedly test your forms

Angular2 provides a number of tools to make our lives as developers easier and to help build robust and testable forms.

  • FormControl – encapsulates inputs and provides objects to work with
  • Validators – Validate inputs
  • Observers – Watch our forms and respond

Angular 2 provides two methods of creating forms:

  • Template Driven Forms
  • Reactive or Model Driven Forms




Reactive or Model Driven Forms

In this guide we will be focusing solely on Model Driven, or as they are also known as Reactive Forms.

Model Driven Forms will probably be how most developers will prefer developing forms within Angular 2, due in part that they will enable us to Unit Test our forms.

Model driven or reactive forms, while similar to template driven forms, add an additional layer of complexity and functionality by having you to declare the model of the form in your component class.

Model Driven forms are created imperatively resulting in them becoming properties of our components. A model driven form is similar to a template driven form, however in order to be able to create this type of form we will first need to import the ReactiveFormsModule into our application.

This will load the reactive forms directives instead of the template driven directives.

Advantages Model Driven Forms

  • We can unit test the form validation logic.
  • use a completely different programming style known as Functional Reactive Programming.

I typically generate new dotnet core projects using a Create a .net core web application on ubuntu in 5 minutes

Create Referer component

We’ll create a simple referer component that we’ll implement a simple Model Driven form to collect web referer information to a website.  We’ll use the Angular-cli to generate the component stub documents for us.  To do this via the terminal change into app/ component directory and use the generrate command.

This will generate a new folder containing 4 files

  • referer.component.html
  • referer.component.ts
  • referer.component.spec.ts
  • referer.component.css




FromGroup and FormControl

A FormGroup represents a set of FormControls. So you can think of a FormGroup as being the actual Form and FormControls as being the actual controls on the Form

To illustrate this , lets set up a very basic HTML Form, and then we will start the process of converting it to an Angular2 Model Driven Form.

Our form will be a basic html form consisting of 3 fields Name, Url and Description. Our markup for the referer.component.html is as follows:

There is not a lot going on with this Form at this stage, other than we have created some controls and assigned some basic BootStrap styling for UI aesthetics.  The purpose of our form here is to collect Web Referer information. Basic Details like Name, Url and Description.

Currently our code is not wired up to do any Angular2 Processing of the forms or anything, what we need to do is ensure that all the plumbing for angular 2 forms is in place.

Import Reactive Forms Module

The first thing we need to do is ensure that we have the ‘@angular/forms’ dependency in our project npm install '@angular/forms' --save

We now need to ensure that we import the ReactiveFormsModule dependency into our Application Module and inject it into our Angular Module. So modify your app.module.ts with the following.

Create a Model

We’ll create 2 new folders directly under our app folder. A shared folder with a child models.

We now need to create the model we’re going to use. Go ahead and create referer.model.ts




Build our form

We now need to update our referer.component.ts to import our model and the FormBuilder, FormGroup and Validators directives

 



FormBuilder

We’ll make use of Higher Level API’s to define our form. FormBuilder is like a factory that creates FormGroup , FormControl and Validators modules. All we need to inject it into our constructor and use its .group() method.

We will also ensure our class implements the OnInit. You may have noticed that we also imported the OnInit directive from @angular/core




Validators

If you’re collecting data you need to ensure that you validate it. We cannot trust our users to provide data as we expect it. There are different ways to add validators, we can either add them as Directives or to the FormControl instance of our model.

Angular comes with a Validators class that has some common validators built-in. We’ve already imported them so we can start using them straight away.

We will also create a simple onSubmit which will simply initially write the values of our form submission out to the console

Our completed referer.component.ts should look like this.




Update referer.component.html

We can now update our referer.component.html a little to start the process of converting the form to an angular 2 forms.

 

First we include the novalidate attribute to disable browser based validation of our fields secondly we add the [formGroup]="referer" to convert our  into a an angular2 form.
We now need to associate our form controls to our model. If you are familiar with Angular 1 or template drive forms this is similar to ngModel and name attributes. We need to ensure that each control that is bound to the model gets a fromControlName directive applied.

 

 




This is obviously a very basic form and the UI presentation needs to cleared up a little, but it does provide a very simple illustration of how to implement Angular 2 Model Driven Forms, by introducing some of the key concepts.

Submit form model to Web API

We now need to submit our data to our Asp.net Web API Controller method. Lets first create our simple Controller method

 




As you’ll notice we have created an ViewModel object we will use to pass data to the controller. The code for this is

 

 



Add Angular Method

 

Gary Woodfine

Freelance Full Stack Developer at threenine.co.uk
Helps businesses by improving their technical proficiencies and eliminating waste from the software development pipelines.

A unique background as business owner, marketing, software development and business development ensures that he can offer the optimum business consultancy services across a wide spectrum of business challenges.

Latest posts by Gary Woodfine (see all)

π