Reactive Forms In Angular

Reactive forms provide a model-driven approach to handling form inputs whose values change over time.

Reactive Forms In Angular By Sagar Jaybhay

Benefits of reactive forms

1. More control over the structure and
2. More control over the behavior of form

Now we have bootstrap form and how we convert this angular reactive form in below scenario.

<form>
    <div class="form-group">
        <label for="username">Username</label>
        <input 
            id="username" 
            type="text" 
            class="form-control">
    </div>
    <div class="form-group">
        <label for="password">Password</label>
        <input 
            id="password" 
            type="text" 
            class="form-control">
    </div>
    <button class="btn btn-primary" type="submit">Sign Up</button>
</form>

In template driven for we use ngModel which is internally created formControl instance and associate this with input fields.

But when we create Reactive Forms we explicitly create formControl object in form.

AbstractControl

In object oriented programming we know inheritance and what is the use of this. Angular we have multiple classes and some common behavior and properties then there is no need to implement this common behavior in every class rather than we can implement this in common abstract class and other classes inherit these properties and behavior from this base class which shown in the above figure. In angular abstract control is base class for formControl and formGroup.

Above explanation gave for we need to create FormGroup object in our component class which contains our login form. And this formgroup object get one parameter which is AbstractControl shown in below fig.

As we have login form which have 2 fields username and password. So we create form object and in which we pass key-value pair object. We have 2 fields so we create 2 properties.

form=new FormGroup({
    username:new FormControl(),
    password:new FormControl()
  })

If our key contains some –(hyphen) in name so it also supported only you need to put in single quotes like below

form=new FormGroup({
    'user-name':new FormControl(),
    'password':new FormControl()
  })

If your object is complex object then instead of FormControl you can use FormGroup and pass required properties in that like below

  form=new FormGroup({
    username:new FormGroup({
      'email':new FormControl()
    }),
    password:new FormControl()
  })

Now we need to bind this object to our form.

<form [formGroup]="form">
    <div class="form-group">
        <label for="username">Username</label>
        <input 
            formControlName="username"
            id="username" 
            type="text" 
            class="form-control">
    </div>
    <div class="form-group">
        <label for="password">Password</label>
        <input 
            formControlName="password"
            id="password" 
            type="text" 
            class="form-control">
    </div>
    <button class="btn btn-primary" type="submit">Sign Up</button>
</form>

But it throws an error. Which shown in below.

Uncaught Error: Template parse errors:
Can't bind to 'formGroup' since it isn't a known property of 'form'. ("<form [ERROR ->][formGroup]="form">
    <div class="form-group">
        <label for="username">Username</label>
"): ng:///AppModule/SignupFormComponent.html@0:6

All the modules which are required to build the reactive form are present in ReactiveFormModule.- https://angular.io/guide/reactive-forms

To solve this error we need to import reactive form module in our main module which app.module