Drill 25: List the steps — Reactive forms

import { Component, inject } from '@angular/core'
import { NonNullableFormBuilder, ReactiveFormsModule, Validators } from '@angular/forms'

@Component({
  selector: 'app-signup',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    <form [formGroup]="form" (ngSubmit)="submit()">
      <label>Email <input formControlName="email" type="email"></label>
      @if (form.controls.email.touched && form.controls.email.invalid) {
        <p>Enter a valid email.</p>
      }
      <button [disabled]="form.invalid">Subscribe</button>
    </form>
  `,
})
export class SignupComponent {
  private fb = inject(NonNullableFormBuilder)
  form = this.fb.group({ email: ['', [Validators.required, Validators.email]] })
  submit() { if (this.form.valid) console.log(this.form.getRawValue()) }
}