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.

Advice

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.

cd src/app/component
ng generate component referer

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:

<div class="container">
 <form  >
        <div class="form-group">
            <label>
                <span>Name</span>
                 </label>
                <input type="text" name="name" class="form-control" placeholder="Referer Name" >
           
        </div>
        <div class="form-group">
            <label>
                <span>Url </span>
                 </label>
                <input type="text" name="url" class="form-control" placeholder="url">
           
        </div>
        <div class="form-group">
            <label>
                <span>Description</span>
                </label>
                <textarea name="description" class="form-control" placeholder="Description" ></textarea>
            
        </div>
        <button type="submit" class="btn btn-success">Add</button>
 
    </form>

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.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@anglar/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
 
@NgModule({
  imports: [BrowserModule, ReactiveFormsModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

Create a Model

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

src
	--app
		--shared
			--models

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

export class Referer{
    
        public name:string;
        public url:string;
        public description:string;
		
    constructor(data) { Object.assign(this, data);}
}

Build our form

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

import { Component, OnInit } from '@angular/core';
import {FormBuilder, FormGroup, Validators} from "@angular/forms";
 
import { Referer } from '../../shared/models/referer.model';
 
 
@Component({
    selector: 'referer',
    templateUrl: './referer.component.html'
})
export class RefererComponent {
   
}

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

export class RefererComponent implements OnInit
 {
    refForm: FormGroup;   // Define our from group
 
    constructor(private fb: FormBuilder){}    // Inject the form builder
     .....
    }

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.

import { Component, OnInit } from '@angular/core';
 
import {ReactiveFormsModule, FormBuilder, FormGroup, Validators} from "@angular/forms";
 
import { Referer } from '../../../shared/models/referer.model';
@Component({
  selector: 'app-referer',
  templateUrl: './referer.component.html',
  styleUrls: ['./referer.component.scss']
})
export class RefererComponent implements OnInit {
 
 public referer : FormGroup;
   public submitted: boolean;
  
 
    constructor(private fb: FormBuilder){}
    ngOnInit(){
 
            this.referer = this.fb.group({
            name:['', [Validators.required, Validators.minLength(5)]],
            url: ['',  [Validators.required]],
            description:['',  [Validators.required]]
        });
    }
    onSubmit({value, valid} : {value : Referer, valid: boolean}){
        this.submitted=true;
        console.log(value, valid );
      
    }
 
}

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.

<div class="container">
 <form novalidate [formGroup]="referer" (ngSubmit)="onSubmit(referer, referer.isValid)" >
        <div class="form-group">
            <label>
                <span>Name</span>
                 </label>
                <input type="text" formControlName="name" class="form-control" placeholder="Referer Name" >
                <div [hidden] ="referer.controls.name.valid || referer.controls.name.pristine" class="alert alert-danger">
                <span *ngIf="!referer.controls.name.valid">Name is required!</span>
           </div>
        </div>
        <div class="form-group">
            <label>
                <span>Url </span>
                 </label>
                <input type="text"formControlName="url" class="form-control" placeholder="url">
                  <div [hidden] ="referer.controls.url.valid || referer.controls.url.pristine" class="alert alert-danger">
                <span *ngIf="!referer.controls.url.valid">Url is required!</span>
                </div>
           
        </div>
        <div class="form-group">
            <label>
                <span>Description</span>
                </label>
                <textarea formControlName="description" class="form-control" placeholder="Description" ></textarea>
               <div [hidden] ="referer.controls.description.valid || referer.controls.description.pristine" class="alert alert-danger">
                <span *ngIf="!referer.controls.description.valid">Description is required!</span>
                </div>
        </div>
        <button type="submit" class="btn btn-success" [disabled]="!referer.valid">Add</button>
 
    </form>
 
  </div>
 
  {{referer.value | json }}

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

[Route("api/[controller]/[action]")]
    public class RefererController : Controller
    {
        private readonly ConfigContext _context;
       [HttpPost]
        public async Task Insert( [FromBody]  RefererViewModel ref)
        {
           
            if (ModelState.IsValid)
            {
                var referer = Mapper.Map(ref);
               _context.Add(referer);
                await _context.SaveChangesAsync();
 
                return Ok(app);
            }
            else
            {
                return NotFound("Invalida data supplied");
            }
        }
		}

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

public class RefererViewModel
    {
        [Required]
        public string Name { get; set; }
 
        [Required]
        public string Description { get; set; }
 
        [Required]
        public byte url { get; set; }
 
    }

Add Angular Method

onSubmit({ value, valid }: { value: Referer, valid: boolean }) {
        this.submitted = true;
        console.log(value);
        
        let body = JSON.stringify(value );
 
        console.log(body);
        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers });
 
return   this.http.post('/api/referer/insert', body,options).subscribe();
 
        
 
    }

About
Latest Posts

Gary Woodfine

Technical Director at threenine.co.uk

Gary is Technical Director at threenine.co.uk, an independent software vendor specialising in IoT, Field Service and associated managed services,enabling customers to be efficient, productive, secure and scale-able.