Membuat CRUD sederhana dengan angular 5 part III
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.gitPada 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