Card image cap
[Angular 7][12] Form (Bagian 1) Binding Data Menggunaan ngModel
Friday, 29 Mar 2019

Hello world,

Masuk ke pembahasan mengenai Form, ada beberapa tahapan yang akan saya bagi ke dalam 3 post berbeda. Yang pertama adalah binding data menggunakan ngModul. Langkah pertama yang harus dilakukan adalah import FormsModule pada app.module.ts dan tambahkan pada @ngModule.

import { FormsModule } from '@angular/forms';

@NgModule({

  declarations: [

    AppComponent,

  ],

  imports: [

    BrowserModule,

    FormsModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

Selanjutnya kita buat form HTML. Pada contoh di bawah ini menggunakan Template Reference Variables bernama userForm yang beiris ngForm. Lalu pada tiap-tiap input ditambahkan ngModel. Selanjutnya data akan ditampilkan dalam bentuk json di bawah form. Kita juga dapat mengelompokkan input menggunakan ngModelGroup.

<form #userForm="ngForm">
  <input type="text" name="nama" ngModel> <br>
  <input type="email" name="email" ngModel> <br>
  <input type="password" name="password" ngModel> <br>
 
  <button type="submit">Simpan</button>
 
</form>
{{ userForm.value | json }}


Setelah dijalankan maka setiap kali form diisi maka data akan langsung ditampilkan di bawah form (mengacu pada userForm) dalam bentuk json.


Selamat mencoba :)