How to configure Reactive Forms in your Angular Application?

Hey people!

Today I'm going to explain how to configure your Angular application to use Reactive Forms and how to implements your first form.

First of all, you have to install the forms module in your project:

npm install @angular/forms --save

Then, you have to modify your app.module.ts adding:

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({

imports: [ BrowserModule, ReactiveFormsModule ], 

declarations: [ AppComponent ], 

bootstrap: [ AppComponent ]

})

On this point, your project is prepared for using Reactive Forms.

The you have to modify the form component you want to use:

<div class="container">
  <h1>Add user</h1>
  <form [formGroup]="myForm" novalidate (ngSubmit)="save(myForm.value, myForm.valid)">
    <div class="form-group">
      <label for="">Name</label>
      <input type="text" class="form-control" formControlName="name">
      <small [hidden]="myForm.controls.name.valid || (myForm.controls.name.pristine && !submitted)" class="text-danger">
            Name is required (minimum 5 characters).
          </small>
      <!--<pre class="margin-20">{{ myForm.controls.name.errors | json }}</pre>-->
    </div>
    <div class="form-group" formGroupName="address">
      <label for="">Address</label>
      <input type="text" class="form-control" formControlName="street">
      <small [hidden]="myForm.controls.address.controls.street.valid || (myForm.controls.address.controls.street.pristine && !submitted)" class="text-danger">
            Street required
          </small>
    </div>
    <div class="form-group" formGroupName="address">
      <label for="">Postcode</label>
      <input type="text" class="form-control" formControlName="postcode">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
    <div class="margin-20">
      <div>myForm details:-</div>
      <pre>Is myForm valid?: <br>{{myForm.valid | json}}</pre>
      <pre>Is myForm submitted?: <br>{{submitted | json}}</pre>
      <pre>myForm value: <br>{{myForm.value | json}}</pre>
    </div>
    <div class="margin-20">
      Form changes:
    </div>
    <div *ngFor="let event of events" class="margin-20">
      <pre> {{ event | json }} </pre>
    </div>
  </form>
</div>

With the typescript file of the component with the changes:

public myForm: FormGroup;
public submitted: boolean;

...

constructor(private _fb: FormBuilder) { }

...

ngOnInit() {

        // the short way

        this.myForm = this._fb.group({

            name: ['', [<any>Validators.required, <any>Validators.minLength(5)]],

            address: this._fb.group({

                street: ['', <any>Validators.required],

                postcode: ['8000']

            })

        });

}

...

save(model: User, isValid: boolean) {
        this.submitted = true;
        console.log(model, isValid);
}

You can develop your forms in many way.
Use which is more easy for you.

Try it and have fun!