Understanding Forms in Angular – Part 2 Reactive Forms

In this simple tutorial, we would cover Reactive Forms in Angular. This follows from Part 1. There we covered Template-Driven Forms.

According to Angular documentation, reactive forms make use of explicit and immutable approach to managing the forms state. It is also based on observable streams. Moreover, reactive forms are more predictable with synchronous access to data model.

Step 1: So you need to create a new component and setup the basic form like before. I call this component rform.

Next, add the markup [formGroup] attribute to the form. Set it’s value as well. I named it rform but you can use any other name:

[formGroup] = "rform"

Once, you do this, you have to import the Reactive form module.

Then you’ll create a field rform of type FormGroup (requires you import FormGroup as well)

Build the Form

We now need to build the form using FormBuilder. This makes it a lot easier.

First add the FormControlName attribute to all the form controls in the html. So the markup for the form controls in the HTML would be like this:

<form>
  <div class="form-group">
    <label>id</label>
    <input class="form-control" formControlName="id">
  </div>
  <div class="form-group">
    <label>Name</label>
    <input class="form-control" formControlName="name">
  </div>
  <div class="form-group">
    <label >Department</label>
    <input class="form-control" formControlName="department">
  </div>
  <select class="form-control" formControlName="country"> 
    <option> </option> 
  </select>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Next, add a FormBuilder variable as a parameter to the constructor (remember also to import FormBuilder).

Finally you build the form in the ngOnInit() method. Or just in the class. This is easy too. See the code below. So you can build any kind of form based on the html form markup.

    this.rform = this.fb.group({
      id: [''],
      name: [''],
      department: [''],
      country: ['']
    });

So what happens here is that the form is built and each control value is initialised as an empty string.

Form Submission

To handle form submission, we would add a submit event to the form like this:

 (ngSubmit)="send()"

Then we write the event handler. We can use console.log() to check what happens when values changes.

Dropdownlist Items

We use the same method we used in Template-driven forms. Create the list of item in the ts file. Then in the html markup for the select, we have:

<select class="form-control" formControlName="country">
  <option *ngFor="let country of countries" value={{country}}>
    {{country}}
  </option>
</select>

By now, I’m sure you know the difference between template-driven forms and reactive forms in Angular! However, there is more to learn. For instance:

• How do we handle validation
• Handling onSelect Event
• Loading a State when country is selected etc

I’ll cover these and more in subsequent lessons. I recommend you subscribe to my YouTube Channel so you don’t miss any update.