Membuat Form Email Angular dengan Reactive Forms

Form langganan membutuhkan lebih dari sebuah input. Pengguna perlu mengetahui mengapa data belum bisa dikirim. Reactive Forms menempatkan nilai dan aturan validasi pada model form di TypeScript.

Contoh berikut memakai satu kontrol email. Pesan kesalahan ditampilkan setelah input disentuh, sedangkan submit yang tidak valid menandai kontrol agar pesan terlihat. Contoh sengaja berhenti pada konfirmasi lokal; belum mengirim data ke layanan langganan.

Contoh implementasi

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

@Component({
  selector: 'app-subscribe',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    <form (ngSubmit)="submit()">
      <label for="email">Email</label>
      <input id="email" type="email" [formControl]="email"
        aria-describedby="email-error" />
      <p id="email-error" aria-live="polite">
        @if (email.touched && email.invalid) { Enter a valid email. }
      </p>
      <button type="submit">Subscribe</button>
    </form>
    <p role="status">{{ message() }}</p>
  `,
})
export class Subscribe {
  email = new FormControl('', {
    nonNullable: true,
    validators: [Validators.required, Validators.email],
  });
  message = signal('');

  submit(): void {
    this.message.set('');
    this.email.markAsTouched();
    if (this.email.invalid) return;
    this.message.set('Email format accepted. No request has been sent.');
  }
}

Cara memeriksa

Kirim form kosong, masukkan teks tanpa format email, lalu coba reader@example.com. Dua percobaan pertama harus menampilkan kesalahan. Percobaan terakhir menampilkan konfirmasi tanpa memuat ulang halaman.

Opsi nonNullable menjaga tipe nilai kontrol tetap berupa string, termasuk ketika kontrol direset. Pada aplikasi nyata, lakukan validasi ulang di server dan tampilkan kesalahan dari respons server. Email dengan format benar belum membuktikan bahwa alamat tersebut ada atau dimiliki pengguna.

Referensi

Dokumentasi resmi