Image Load

Hello world,

Melanjutkan dari pembahasan sebelumnya yang sudah terlalu lama ditinggalkan yaitu Form (Bagian 1) Binding Data Menggunaan ngModel dan Form (Bagian 2) Binding Data ke dalam Model, maka sekarang akan saya lanjutkan ke bagian ke-3 yaitu bagaimana cara submit data dari form tersebut. Pertama tambahkan ngSubmit pada form seperti contoh berikut:

<form #userForm = "ngForm"(ngSubmit) = "onSubmit()" > 
<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>

Lalu tambahkan method pada component

import { Component } from '@angular/core';
import { User } from './user';
@Component({
selector: 'app-root',
templateUrl: './app.component.html&#39;,
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'namaweb';
userModel = new User('', '', '');
onSubmit(){
console.log(this.userModel);
}
}

Dari contoh di atas, maka saat form diisi dan diklik tombol simpan maka akan menampilkan data ke console. Pastikan data yang diinput sudah sesuai dengan yang ada di console. Selanjutnya tambahkan proses submit data dengan HTTP. Di sini kita akan membuat services dengan cara menjalankan ng g s proses. “proses” di sini adalah nama services dan dapat diganti sesuai kebutuhan. Tambahkan kode berikut ke dalam proses.service.ts. Silakan ganti _url dengan api kalian sendiri.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'
import { User } from './user';
@Injectable({
providedIn: 'root'
})
export class ProsesService {
_url = 'https://contohapi.com/submit';
constructor(
private _http : HttpClient
) { }
enroll(user: User){
let formData: FormData = new FormData();
formData.append('nama', user.nama);
formData.append('email', user.email);
formData.append('password', user.password);
return this._http.post&lt;any&gt;(this._url, formData);
}
}

Dari contoh di atas, pertama yang dilakukan adalah import HTTP (baris 2), kemudian dalam class ProsesService diisi dengan url dan data yang disesuaikan dengan kebutuhan. Selanjutnya import juga HTTP kedalam app.module.ts.

import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
FormsModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})

Lalu tambahkan kode berikut pada onSubmit method dalam app.component.ts.

   constructor(private _prosesService: ProsesService){}
onSubmit(){
this._prosesService.enroll(this.userModel).subscribe(
data => console.log('Success!', data),
error => console.log('Error!', error)
)
}


Full Code app.component.ts

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

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'namaweb';

userModel = new User('', '', '');

constructor(private _prosesService: ProsesService){}
onSubmit(){
this._prosesService.enroll(this.userModel).subscribe(
data => console.log('Success!', data),
error => console.log('Error!', error)
)
}
}


Selamat mencoba :)