[Angular 7][13] Form (Bagian 2) Binding Data ke dalam Model

Hello world,

Melanjutkan dari post sebelumnya yaitu mengenai form, kali ini saya berikan contoh bagaimana melakukan binding data ke dalam model. Pertama kita harus membuat class sebagai model yang akan diisi dengan data. Jalankan ng generate class User. “User” di sini adalah nama class. Lalu Tambahkan kode sebagai berikut pada user.ts.

export class User {
    constructor(
        public nama : string,
        public email : string,
        public password : string
    ){}
}

Selanjutnya Tambahkan User class ke dalam app.component.ts dan app.component.html

import { Component } from '@angular/core';
import { User } from './user';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'namaweb';
  userModel = new User('Riza', 'riza@test.com', 'qwerty');
}

<form>
  <input type="text" name="nama" [(ngModel)]="userModel.nama"> <br>
  <input type="email" name="email" [(ngModel)]="userModel.email"> <br>
  <input type="password" name="password" [(ngModel)]="userModel.password"> <br>
 
  <button type="submit">Simpan</button>
 
</form>
{{ userModel | json }}
 

Dari conth di atas ada perubahan dalam alur datanya (berbeda dari contoh pada post [Angular 7][12]) dimana kali ini data dibind ke dalam class User (code warna kuning) kemudian data di binding ke dalam form (code warna hijau).

Selamat Mencoba :)