Reactive Forms: Validators — CompileDaily Study

Penjelasan

Validators adalah kumpulan fungsi validasi bawaan Angular (Validators.required, Validators.minLength, Validators.email, dst) yang dipasangkan sebagai argumen kedua FormControl. Status validasi form/field bisa dicek lewat form.valid, form.get('nama')?.errors, dan ditampilkan kondisional di template.

Contoh Konsep

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

@Component({
    selector: 'app-form-produk',
    standalone: true,
    imports: [ReactiveFormsModule],
    template: `
        <form [formGroup]="form">
            <input formControlName="nama" type="text">
            @if (form.get('nama')?.invalid && form.get('nama')?.touched) {
                <p>Nama wajib diisi, minimal 3 karakter</p>
            }
            <button [disabled]="form.invalid">Simpan</button>
        </form>
    `,
})
export class FormProdukComponent {
    form = new FormGroup({
        nama: new FormControl('', [Validators.required, Validators.minLength(3)]),
    });
}

Praktikum

Tambahkan Validators.required dan Validators.email ke FormControl email pada form yang sudah ada. Tampilkan pesan error "Email tidak valid" kondisional saat field-nya invalid dan sudah touched.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Cek .touched (field sudah pernah disentuh/blur) SEBELUM menampilkan pesan error, bukan cuma .invalid saja — kalau tidak, pesan error akan langsung muncul SEBELUM user sempat mengisi apa pun, pengalaman yang terasa "menuduh" pengguna sejak awal.