Reactive Forms – Using FormControl

Here’s a simple tutorial on how to use Reactive Forms in Angular using just FormControl without involving FormGroup or FormArray.

This allows us to use reactive forms in our components.

Create a Basic Form Using FormControl

In this example, we’ll create a simple form with a single input field for a name. We will manage the form state using only FormControl.

3.1: Update app.component.ts

Inside app.component.ts, import FormControl and set up a form control for the name field:

typescriptCopy codeimport { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  nameControl = new FormControl('');  // Initialize FormControl with an empty string
}

Create the HTML Form

In app.component.html, we will bind the FormControl to an input field and display its value:

htmlCopy code<div>
  <label for="name">Name:</label>
  <input id="name" [formControl]="nameControl" />
  <p>Value: {{ nameControl.value }}</p>
  <p>Status: {{ nameControl.status }}</p>
</div>

In this template:

• We bind the nameControl to the input field using Angular’s formControl directive.
• The nameControl.value displays the current value of the input field.
• The nameControl.status displays the current validation status of the control.

Handle User Input and Validation

Now, let’s add some basic validation to ensure the name field is not empty. We’ll use Angular’s built-in validators.

Update app.component.ts to Include Validators

We can add validation to the FormControl by passing a second argument to the FormControl constructor. The second argument is an array of validators. In this case, we’ll use Validators.required to ensure the name is not empty:

import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  nameControl = new FormControl('', [Validators.required]);  // Add Validators.required to ensure the field is not empty
}

Show Error Messages in the Template

Next, update the template to show an error message if the field is empty when the user tries to submit:

<div>
  <label for="name">Name:</label>
  <input id="name" [formControl]="nameControl" />
  <p>Value: {{ nameControl.value }}</p>
  <p>Status: {{ nameControl.status }}</p>

  <!-- Show error message if validation fails -->
  <div *ngIf="nameControl.invalid && nameControl.touched">
    <span style="color: red;">Name is required!</span>
  </div>
</div>

Handle Form Submission (Optional)

If you want to handle form submission using the FormControl and display the form data, you can add a submit button.

Update app.component.ts

Add a submit method to handle the form submission and print the value of the FormControl:

export class AppComponent {
  nameControl = new FormControl('', [Validators.required]);

  submitForm() {
    if (this.nameControl.valid) {
      alert('Form Submitted with Name: ' + this.nameControl.value);
    } else {
      alert('Form is not valid');
    }
  }
}

Update the Template

Add a submit button to trigger the submitForm method:

<div>
  <label for="name">Name:</label>
  <input id="name" [formControl]="nameControl" />
  <p>Value: {{ nameControl.value }}</p>
  <p>Status: {{ nameControl.status }}</p>

  <div *ngIf="nameControl.invalid && nameControl.touched">
    <span style="color: red;">Name is required!</span>
  </div>

  <button (click)="submitForm()">Submit</button>
</div>

Conclusion

This simple tutorial shows how to use Angular’s FormControl for reactive forms. By using just a single FormControl, you can manage form input, validation, and submission in a straightforward manner.

Key Concepts

• FormControl: Manages the value and validation of a single form control.
• Validators: You can apply validation rules like Validators.required, Validators.minLength, etc.
• Template Binding: Use [formControl] to bind the FormControl to the form field.
• Validation Handling: You can check if a control is valid using control.invalid and display error messages.

This approach is ideal for simple forms where you only need one or two fields, without needing the overhead of a FormGroup.