What are Angular Reactive Forms and how do I use them?

What are Angular Reactive Forms and how do I use them?

Angular Reactive Forms are a way to manage form inputs in Angular applications using reactive programming. They provide a model-driven approach to handling form inputs, making it easier to manage complex forms.

Can you show me a simple example of a reactive form?

Sure! Here's a basic example: You can create a form using FormGroup and FormControl. For instance:

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

@Component({
  selector: 'app-my-form',
  template: `
    <form [formGroup]='myForm' (ngSubmit)='onSubmit()'>
      <input formControlName='name'>
      <button type='submit'>Submit</button>
    </form>
  `
})
export class MyFormComponent {
  myForm = new FormGroup({
    name: new FormControl('')
  });

  onSubmit() {
    console.log(this.myForm.value);
  }
}

This creates a simple form with a single input for the name.

What are the advantages of using Reactive Forms over Template-driven Forms?

Reactive Forms offer better scalability and maintainability for complex forms. They provide more control over form validation and state management, making it easier to handle dynamic forms.

How do I add validation to my Reactive Form?

You can add validation by using the Validators class. For example:

import { Validators } from '@angular/forms';

this.myForm = new FormGroup({
  name: new FormControl('', [Validators.required, Validators.minLength(3)])
});

This will require the name field to be at least 3 characters long.