Angular — Reactive Forms

Template-Driven Forms

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

@Component({
  imports: [FormsModule],
  template: `
    <form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm)">
      <input name="email" ngModel required email>
      <input name="password" ngModel required minlength="6">
      <button [disabled]="loginForm.invalid">Login</button>
    </form>
  `
})
export class LoginComponent {
  onSubmit(form: any) {
    console.log(form.value);
  }
}

Reactive Forms

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

@Component({
  imports: [ReactiveFormsModule],
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <input formControlName="email">
      <input formControlName="password">
      <button [disabled]="form.invalid">Login</button>
    </form>
  `
})
export class LoginComponent {
  form = new FormGroup({
    email: new FormControl('', [Validators.required, Validators.email]),
    password: new FormControl('', [Validators.required, Validators.minLength(6)])
  });
  
  onSubmit() {
    console.log(this.form.value);
  }
}

Form Validation

// Template-driven
// In template: *ngIf="email.invalid && email.touched"

// Reactive
this.form.get('email')?.invalid

Mini Practice

1. Create a template-driven form
2. Create a reactive form
3. Add validation
4. Handle form submission

Up Next

Continue with Form Validation — validating form inputs.