Angular Forms – 8

Sampai disini kita sudah bisa melakukan manipulasi template driven form menggunakan Angular.

Namun kita belum melakukan proses submit. Proses submit disini akan dibuat sederhana yaitu mengambil data yang akan disubmit, dan kita tampilkan kembali didalam aplikasi. (kita akan bahas meyimpan kedalam database dalam modul yang berbeda, tujuan dari modul ini adalah mengambil data form dari sisi klien).

Submit Form

Buka file app.component.html, tambahkan element html untuk menampilkan data yang disubmit.

Perhatian, isSubmit adalah property untuk menunjukan jika form sudah disubmit. Jika true, maka data akan ditampilkan. Data akan dilakukan dengan string interpolation.

<div class="row" *ngIf="isSubmit">
    <div class="col-xs-12">
      <h3>Your Data</h3>
      <p>Name: {{user.usrname}} </p>
      <p>Mail: {{user.email}}</p>
      <p>Secret: {{user.secret}}</p>
      <p>Secret Answer: {{user.answer}}</p>
      <p>Jenis Kelamin: {{user.jnskelamin}}</p>
    </div>
  </div>

Kemudian buka file app.component.ts, tambahkan

• property isSubmit untuk digunakan sebagai checking apakah button submit sudah ditekan.
• property user untuk menyimpan data yang disubmit, dan nantinya digunakna dalam string interpolation.
• modifikasi method onSubmit() untuk menyimpan data yang disubmit kedalam property user.

  user ={
    usrname: '',
    email: '',
    secret: '',
    answer: '',
    jnskelamin: ''
  };

  isSubmit = false;

  onSubmit(){
    // console.log(this.myForm);
    this.isSubmit = true;
    this.user.usrname = this.myForm.value.userData.username;
    this.user.email = this.myForm.value.userData.email;
    this.user.secret = this.myForm.value.secret;
    this.user.answer = this.myForm.value.secretAnswer;
    this.user.jnskelamin = this.myForm.value.jeniskelamin;
  }

Jika Anda jalankan, sesuai ekspektasi, form berhasil disubmit.

Reset Form

Sebagai penutup modul form template driven, kita akan membahas cara untuk mereset isi form.

Misalnya kita sudah berhasil mengekstrak data form, untuk melakukan reset, digunakan perintah reset.

Perhatian: perintah reset bukan hanya mengosongkan value dari input element, tapi juga state dari form seperti dirty, touched dan lainnya.

this.myForm.reset();

Berikut isi lengkap file app.component.html

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
      <form (ngSubmit)="onSubmit()" #f="ngForm">
        <div id="user-data" ngModelGroup="userData" #userData="ngModelGroup">
          <div class="form-group">
            <label for="username">Username</label>
            <input type="text" id="username" class="form-control" ngModel name="username" required>
          </div>
          <button class="btn btn-default" type="button" (click)="suggestUserName()">Suggest an Username</button>
          <div class="form-group">
            <label for="email">Mail</label>
            <input type="email" id="email" class="form-control" ngModel name="email" required email #vemail="ngModel">
            <span *ngIf="!vemail.valid && vemail.touched">Please input valid email...</span>
          </div>          
        </div>
        <p *ngIf="!userData.valid && userData.touched">User data tidak invalid</p>
        <div class="form-group">
          <label for="secret">Secret Questions</label>
          <select id="secret" class="form-control" [ngModel]="defaultSecret" name="secret">
            <option value="pet">Your first Pet?</option>
            <option value="teacher">Your first teacher?</option>
          </select>
        </div>
        <div class="form-group">
          <textarea name="secretAnswer" rows="3" class="form-control" [(ngModel)]="answerSecret"></textarea>
          <p>Your answer is: {{answerSecret}}</p>
        </div>
        <div class="radio" *ngFor="let jk of jenisKelamin">
          <label><input name="jeniskelamin" type="radio" ngModel [value]="jk">{{jk}}</label>
        </div>
        <button class="btn btn-primary" type="submit" [disabled]="!f.valid">Submit</button>
      </form>
    </div>
  </div>
  <hr>
  <div class="row" *ngIf="isSubmit">
    <div class="col-xs-12">
      <h3>Your Data</h3>
      <p>Name: {{user.usrname}} </p>
      <p>Mail: {{user.email}}</p>
      <p>Secret: {{user.secret}}</p>
      <p>Secret Answer: {{user.answer}}</p>
      <p>Jenis Kelamin: {{user.jnskelamin}}</p>
    </div>
  </div>
</div>

file app.component.ts

import { Component, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild('f') myForm! : NgForm;
  defaultSecret = 'pet';
  answerSecret = '';
  jenisKelamin = ['Pria', 'Wanita'];

  user ={
    usrname: '',
    email: '',
    secret: '',
    answer: '',
    jnskelamin: ''
  };

  isSubmit = false;

  suggestUserName() {
    const suggestedName = 'Superuser';
    // pendekatan ini akan mereset form yang sudah diisi oleh user
    // this.myForm.setValue({
    //   userData:{
    //     username: suggestedName,
    //     email: ''
    //   },
    //   secret: 'teacher',
    //   secretAnswer: '',
    //   jeniskelamin: 'male'
    // });

    //pendekatan ini memungkinkan kita untuk mengupdate field tertentu saja.
    this.myForm.form.patchValue({
      userData:{
        username: suggestedName
      }
    });
  }

  // pendekatan pertama
  // onSubmit(form: NgForm){
  //   console.log(form);
  // }
  
  onSubmit(){
    //console.log(this.myForm);
    this.isSubmit = true;
    this.user.usrname = this.myForm.value.userData.username;
    this.user.email = this.myForm.value.userData.email;
    this.user.secret = this.myForm.value.secret;
    this.user.answer = this.myForm.value.secretAnswer;
    this.user.jnskelamin = this.myForm.value.jeniskelamin;

    this.myForm.reset();
  }
}

Dengan berakhirnya modul ini, pembahasan form template driven sudah selesai. Anda dapat download file project finished disini: https://drive.google.com/file/d/1jVx2FMYoQyFFZPOAzMENf831qFvzfJ2j/view?usp=sharing

Pada modul berikutnya akan kita bahas form reactive, dimana kita akan lebih banyak bekerja pada file typescript.