[Angular 7][12] Form (Bagian 1) Binding Data Menggunaan ngModel

Hello, this is my website. Find all information about website design, website programming, HTML, CSS, Javascript, Jquery, Angular, Flutter, Plugin, Mockup, Mysql, Database, etc.

Tips & Trick



Card image cap
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 :)