Angular Reactive Forms – 1

Pendekatan Reactive Forms adalah membuat form melalui code typescript.

Anda bisa download file awal project disini : https://drive.google.com/file/d/151h6ANBdQSzjiGCPzOdyrAqt4NkpbsoB/view?usp=sharing

Untuk menggunakan reactive forms, perlu import library pada app.module.ts

Buka file app.module.ts, hapus FormsModule (tidak digunakan), kemudian import ReactiveFormsModule.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; //hapus tidak digunakan
import { ReactiveFormsModule } from '@angular/forms'; 


import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    FormsModule, // hapus sudah tidak digunakan
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Untuk membuat form melalui program, kita perlu container dengan menggunakan FormGroup.

Buka file app.component.ts, kemudian tambahkan property untuk menyimpan informasi form.

import { Component } from '@angular/core';
//import formgroup library
import { FormGroup } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  genders = ['male', 'female'];
  //inisialisasi property formgroup
  myForm! : FormGroup;
}

Sampai disini kita sudah selesai melakukan setup awal. Pada modul berikutnya kita akan mulai membuat form melalui program typescript.