At some point in every web
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.
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
FromGroup and FormControl
FormGroup represents a set of
FormControls. So you can think of a
FormGroup as being the actual
FormControls as being the actual controls on the
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
We now need to create the
model we’re going to use. Go ahead and create
Build our form
We now need to update our
referer.component.ts to import our model and the
We’ll make use of Higher Level API’s to define our form.
FormBuilder is like a factory that creates
Validators modules. All we need to inject it into our constructor and use its
We will also ensure our class implements the OnInit. You may have noticed that we also imported the
OnInit directive from
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
referer.component.ts should look like this.
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
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
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)
- Making API calls with HttpClientFactory in Console applications - April 16, 2019
- Product Review: System76 Darter Pro - April 12, 2019
- Disrupting the disruptors - April 10, 2019