Membuat CRUD sederhana dengan angular 5 part III

Muhammad Zakuan
Sep 2, 2018 · 2 min read

Tulisan kali ini merupakan kelanjutan tulisan saya sebelumnya yang membuat crud dengan frontend angular 5. Aplikasi tulisan saya sebelumnya dapat anda download di

https://github.com/zackstam/angular-crud-part-2.git

Pada tulisan crud yang sudah kita buat sampai pada menampilkan dan menghapus data. Selanjutnya kita akan fitur untuk menambah data.

langkah pertama yang kita lakukan adalah import FormsModule dan ReactiveFormsModule di students.module.tssehingga tampak seperti berikut

import { NgModule } from '@angular/core';import { CommonModule } from '@angular/common';...
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({imports: [..FormsModule,ReactiveFormsModule],declarations: [StudentListComponent, StudentAddComponent],providers: [StudentsService]})export class StudentsModule { }

Tambahkan method berikut di service student untuk request post data form student ke api.

post(data) {return this.httpClient.post('http://localhost:3333/api/v1/students', data);}

Tambahkan di bagian import student-add.component.tscode berikut

import { FormGroup, FormControl, Validators } from '@angular/forms';import { StudentsService } from "../students.service";import { Router } from '@angular/router';

Deklarasikan variabel formStudent sebagai formGrou di class StudentAddComponent

formStudent: FormGroup;

Masukkan method dan service yang akan kita gunakan di bagian constructor

constructor(private studentService: StudentsService, private router: Router) { }

Tambahkan method this.buildForm()untuk membuat formGroup formStudent dan method onSubmit()sebagai action dari klik submit.

buildForm() {this.formStudent = new FormGroup({'nisn': new FormControl(null, [Validators.required]),'name': new FormControl(null, [Validators.required]),'study': new FormControl(null, [Validators.required, Validators.email])});}onSubmit() {const data = this.formStudent.value;this.studentService.post(data).subscribe(response => {this.router.navigate(['students']);},error => {alert('error' + error);});}

Panggil method this.buildForm()di ngOninit() sehingga tampak seperti berikut

ngOnInit() {this.buildForm();}

Tambahkan code berikut di student-add.component.htmluntuk menampilkan form student

<div class="example-container"><form name="form" [formGroup]="formStudent" (submit)="onSubmit();"><mat-form-field><input matInput placeholder="NISN" formControlName="nisn"></mat-form-field><br><mat-form-field><input matInput placeholder="Nama" formControlName="name"></mat-form-field><br><mat-form-field><input matInput placeholder="Jurusan" formControlName="study"></mat-form-field><br><div mat-dialog-actions class="pt-24" fxLayout="row" fxLayoutAlign="center center"><button mat-raised-button class="mat-accent mr-16">Simpan</button></div></form></div>

Untuk membuat lebih baik tampilannya tambahkan css berikut di student-add.component.css

.example-container {display: flex;flex-direction: column;}
.example-container > * {width: 50%;margin: 0 auto;}

Jika anda mengikuti tutorial ini dengan baik maka tampilan form student akan tampak seperti berikut

Hasil dari tutorial ini dapat anda download di github berikut

https://github.com/zackstam/angular-crud-part-3.git

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade