Basic Angular Reactive Form

In this article, I am going to create an Angular reactive form. We will make a contact form where the user can enter their name, email, and comment. I will also add validation.

Let's set up our project

If you don't have Angular installed on your computer, go to Angular.io and follow the instructions on installing it on your machine.

Let's create a new Angular project. Open your command prompt and type the following

ng new <name>

Follow the steps on the prompt, and once done, you should have a new Angular application. To view your new application, type ng serve -o; once the cli finishes, it will open your default browser and display the default Angular application.

Now that we have it up and running let's do some coding.

Step 1

we first need to import the reactive form module to our application. open app.module.ts and import ReactiveFormsModule

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  imports:      [ BrowserModule, ReactiveFormsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Step 2

Now we need to create our form. Let's make a new component and make our form. We will need to include the following code:

To make a new component, we can run the following CLI command: ng g component contactForm

Once that's done, we can open our new component and use the following code to create our forms:

import { Component, OnInit } from '@angular/core';
import { FormGroup, Validators, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-contact-form',
  templateUrl: './contact-form.component.html',
  styleUrls: ['./contact-form.component.css']
})
export class ContactFormComponent implements OnInit {
  contactForm: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.contactForm = this.fb.group({
      name: this.fb.control(''),
      email: this.fb.control(''),
      message: this.fb.control('')
    });
  }

  save() {
    console.log(this.contactForm);
  }
}

Now open the new component HTML file and add the following code

<div>
  <form [formGroup]="contactForm" (ngSubmit)="save()">
    <p>
      Name:
      <input type="text" formControlName="name">
    </p>
    <p>
      Email:
      <input type="text" formControlName="email">
    </p>
    <p>
      Message:
      <input type="text" formControlName="message">
    </p>
    <p>
      <button type="submit">Save</button>
    </p>
  </form>
</div>

The code above will create the contact form, and when you click on the submit button, it will call the save() function and display the form content in the developer tools.

As you can see in the developer tools, the form object has a status property, and since we don't have any validation, you can see the current status is valid. So let's make some minor changes and add some validation to it.

Adding Validation

With Angular reactive form, we can easily make the fields required with just one small code change. Open contact-form.component.ts and on line 15 change the form initialization to:

this.contactForm = this.fb.group({
  name: this.fb.control('', Validators.compose([Validators.required])),
  email: this.fb.control('', Validators.compose([Validators.required])),
  message: this.fb.control('', Validators.compose([Validators.required]))
});

Save the code changes, and submit the form again. We can see now on the developer tools that the status property is invalid. That was because we marked all the fields in our form to be Required. So we can use the status property from the form object to do some validation when the user clicks the submit button, so we can make sure we only submit the form if it's valid.

Using Reactive forms is a great way to improve your forms, and you can easily add validation to the fields and make it required. As you can see in the example above, we make a small change in our form and made all the fields required.

Here is the link to the working version. Feel free to try it. If you have any questions or comments, please reach out.