FormControl and FormGroup in Angular

FormControl and FormGroup are fundamental building blocks of reactive forms in Angular. This tutorial covers the basics of FormControl and FormGroup and how to use them effectively in your Angular applications.

What is FormControl?

FormControl is a class in Angular that tracks the value and validation status of an individual form control. It is used to create and manage individual form fields in reactive forms.

Creating a FormControl

Here is an example of creating a FormControl:

// app.component.ts
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

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

// app.component.html
<div>
  <label for="name">Name</label>
  <input type="text" [formControl]="name" id="name">
  <button (click)="updateName()">Update Name</button>
</div>

<script>
function updateName() {
  this.name.setValue('John Doe');
}
</script>

What is FormGroup?

FormGroup is a class in Angular that tracks the value and validity state of a group of FormControl instances. It is used to create and manage a group of related form controls in reactive forms.

Creating a FormGroup

Here is an example of creating a FormGroup:

// app.component.ts
import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  userForm = new FormGroup({
    name: new FormControl('', [Validators.required]),
    email: new FormControl('', [Validators.required, Validators.email])
  });

  onSubmit() {
    console.log('Form submitted!', this.userForm.value);
  }
}

// app.component.html
<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
  <div>
    <label for="name">Name</label>
    <input type="text" id="name" formControlName="name">
    <div *ngIf="userForm.get('name').invalid && userForm.get('name').touched">Name is required</div>
  </div>
  <div>
    <label for="email">Email</label>
    <input type="email" id="email" formControlName="email">
    <div *ngIf="userForm.get('email').invalid && userForm.get('email').touched">Enter a valid email</div>
  </div>
  <button type="submit" [disabled]="userForm.invalid">Submit</button>
</form>

Validating Form Controls

You can add validation to form controls using built-in validators or custom validators:

// app.component.ts
import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  userForm = new FormGroup({
    name: new FormControl('', [Validators.required, Validators.minLength(3)]),
    email: new FormControl('', [Validators.required, Validators.email])
  });

  onSubmit() {
    console.log('Form submitted!', this.userForm.value);
  }
}

// app.component.html
<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
  <div>
    <label for="name">Name</label>
    <input type="text" id="name" formControlName="name">
    <div *ngIf="userForm.get('name').invalid && userForm.get('name').touched">
      <div *ngIf="userForm.get('name').errors.required">Name is required</div>
      <div *ngIf="userForm.get('name').errors.minlength">Name must be at least 3 characters long</div>
    </div>
  </div>
  <div>
    <label for="email">Email</label>
    <input type="email" id="email" formControlName="email">
    <div *ngIf="userForm.get('email').invalid && userForm.get('email').touched">
      <div *ngIf="userForm.get('email').errors.required">Email is required</div>
      <div *ngIf="userForm.get('email').errors.email">Invalid email format</div>
    </div>
  </div>
  <button type="submit" [disabled]="userForm.invalid">Submit</button>
</form>

Key Points

Conclusion

FormControl and FormGroup are essential for building and managing reactive forms in Angular. By understanding and using these classes effectively, you can create robust and dynamic forms in your Angular applications. Happy coding!