Reactive Forms Dasar — CompileDaily Study

Penjelasan

Reactive Forms adalah pendekatan form Angular yang lebih terstruktur dibanding [(ngModel)] — form didefinisikan sebagai objek FormGroup berisi beberapa FormControl di TypeScript, lalu diikat ke template lewat directive formGroup dan formControlName. Cocok untuk form kompleks dengan validasi dinamis, karena lebih mudah dites dan dimanipulasi lewat kode.

Contoh Konsep

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

@Component({
    selector: 'app-form-profil',
    standalone: true,
    imports: [ReactiveFormsModule],
    template: `
        <form [formGroup]="form">
            <input formControlName="nama" type="text">
            <input formControlName="email" type="email">
        </form>
        <p>Nilai form: {{ form.value | json }}</p>
    `,
})
export class FormProfilComponent {
    form = new FormGroup({
        nama: new FormControl(''),
        email: new FormControl(''),
    });
}

Praktikum

Buat FormGroup bernama form dengan dua FormControl: judul dan isi (keduanya string kosong). Ikat ke template lewat [formGroup] dan formControlName, tampilkan nilai form.value di bawahnya.

Editor Latihan

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

Tips

Reactive Forms butuh ReactiveFormsModule diimpor (BEDA dengan FormsModule untuk ngModel) — dua module ini TIDAK BOLEH dicampur dalam satu form yang sama, pilih salah satu pendekatan (ngModel ATAU Reactive Forms) secara konsisten per form.