In this article we'll see how to create Reactive Forms using form control and form group, so the first thing to do is to import ReactiveFormsModule from @angular/forms in the app.module.ts and then declare it in the imports[] array.

import { ReactiveFormsModule } from "@angular/forms";

  imports: [
    BrowserModule,
    ReactiveFormsModule
  ],

In the app.component.ts you can see we've import the FormControl from @angular/forms

import { FormControl } from "@angular/forms";

Form Control Example

So after we have imported and setup our module it's time to see practical example for that, so let's take a look at this example. (notice that we still in the app.component.ts file) Form Control Example So what we did is define a very simple control that means we've created an instance of FormControl() class and we initialize it to nothing.

Now in the app.component.html you can see that we've used that email which is an instance of FormControl which we've define in the component class.

<label>
  Enter Email:
  <input type="text" [formControl]="email" />
</label>

Let's display what ever we'll type in the input element using interpolation and the vlaue property from FormControl class.

<p>Display Value: {{ email.value }}</p>

Let's run this and take a look at the browser. reactive forms form control You can see that we can access that instance using interpolation for that form control.

Let's add a button so that when click that button the email will be updated, we can do that by adding a button element in the HTML file.

<button (click)="updateEmail()">
  Click to Update Email
</button>

We've added a click event using updateEmail() method, but we need define this method in the component class in the app.component.ts.

  updateEmail() {
    this.email.setValue("hello@app.com");
  }

What we have basically done is that we have accessing the setValue() method on email instance and passing a string value which in this case is an email. So we save the files and take a look again at the browser you should see a button and we type an email and click on the button the email is now set to our default email. form control set value

So this is the beauty of form control in which we have the complete control of the form in the component class not only in the HTML but also in the logic class.

Form Group Example

So now we'll see how to create reactive forms using form group, for that there is a basic requirements remains the same as the form control that means it requires the ReactiveFormsModule to be imported in app.module.ts and also added to the imports[] array as we've seen above.

But in the component class we have to import FormGroup in the similar fashion to FormControl.

import { FormControl, FormGroup } from "@angular/forms";

a form group is nothing but collection of form controls, we are just creating a hierarchy of form controls so let's define an instance of FormGroup within a bunch of needed FormControls.

  userProfileForm = new FormGroup({
    firstName: new FormControl(""),
    lastName: new FormControl(""),
    age: new FormControl(""),
    email: new FormControl("")
  });

as you can see we've defined 4 form controls in our form group userProfileForm in the app.component.ts.

So now let's go to app.component.html let's create our form with the same form controls we have been defined using formControlName attribute and for the form itself we link to form group using the attribute formGroup and bind it userProfileForm which is the name of our form group.

<form [formGroup]="userProfileForm">
  <label>
    First Name:
    <input type="text" formControlName="firstName" />
  </label>
  <label>
    Last Name:
    <input type="text" formControlName="lastName" />
  </label>
  <label>
    Age:
    <input type="text" formControlName="age" />
  </label>
  <label>
    Email:
    <input type="text" formControlName="email" />
  </label>
</form>

For a bit of styling let's add this 2 lines of style in styles.css

label {
  display: block;
  margin: 1em;
}

Now that we have defined our form group, let's try to submit this form using (ngSubmit) event on form element which will be equal to onSubmit(), also we need to add a button of type submit within the form.

<form [formGroup]="userProfileForm" (ngSubmit)="onSubmit()">
  <label>
    First Name:
    <input type="text" formControlName="firstName" />
  </label>
  <label>
    Last Name:
    <input type="text" formControlName="lastName" />
  </label>
  <label>
    Age:
    <input type="text" formControlName="age" />
  </label>
  <label>
    Email:
    <input type="text" formControlName="email" />
  </label>
  <button type="submit">Submit</button>
</form>

Now let's define onSubmit() method in the component class which will just print the value of the form in the console.

  onSubmit() {
    console.warn(this.userProfileForm.value);
  }

If you save the files and take a look at the browser you should see the form fill the form with the necessary informations and click on the submit form group example As you can see we have complete value of the form logged, so we get the object having all the form group which is having all the controls (firstName, lastName, age, email).

Now imagine that we want access only the firstName rather than accessing this complete form, we can do that using this.

console.log(this.userProfileForm.controls["firstName"].value);

another way to do that is using the get() method on userProfileForm object.

console.log(this.userProfileForm.get("firstName").value);

Form Controls Validation

Let's a quick demo of how we can use validation with our Reactive From in angular. the first step is to import Validators from @angular/forms and for form controls let's add a second argument which will be our rule validation, in this case we've add required rule to the firstName only.

import { FormControl, FormGroup, Validators } from "@angular/forms";

  userProfileForm = new FormGroup({
    firstName: new FormControl("", Validators.required),
    lastName: new FormControl(""),
    age: new FormControl(""),
    email: new FormControl("")
  });

Now we want to disable the submit button until the form is validated that mean we should provide the firstName value.

<button type="submit" [disabled]="!userProfileForm.valid">Submit</button>

If you save the files again and take a look at the browser you can see that you can't click on submit button until there is a value for the first name, this is just a basic validation but you can much more.

So in this way we've created a simple reactive forms in angular using form control and form group.