Implementasi Reactive Form – 2

Pada modul ini kita akan tambahkan ingredient pada form.

Buka file recipe-edit.component.ts, modifikasi dengan menambahkan beberapa code berikut:

• Import library FormArray.
• inisialisasi variable untuk menyimpan data ingredients.
• retrive data ingredients jika Ada, lalu tambahkan pada object form.
• tambahkan method getter untuk mendapatkakan ingredients control.

import { Component, OnInit } from '@angular/core';
//import library FormArray jika tidak otomatis ditambahkan oleh IDE
import { FormArray, FormControl, FormGroup } from '@angular/forms';
import { ActivatedRoute, Params } from '@angular/router';
import { RecipeService } from '../recipe.service';

@Component({
  selector: 'app-recipe-edit',
  templateUrl: './recipe-edit.component.html',
  styleUrls: ['./recipe-edit.component.css']
})
export class RecipeEditComponent implements OnInit {
  id! : number;
  editMode = false;
  recipeForm! : FormGroup;

  constructor(private route: ActivatedRoute, private recipeSrv : RecipeService) { }

  ngOnInit(): void {
    this.route.params.subscribe(
      (params : Params) =>{
        this.id = +params['id'];
        this.editMode = params['id'] != null;
        this.initForm();
      }
    );
  }

  private initForm(){
    let recipeNm = '';
    let recipeImg = '';
    let recipeDesc = '';
    //gunakan formarray untuk handling data ingridients
    let recipeIngredients = new FormArray([]);

    if (this.editMode){
      const recipe = this.recipeSrv.getRecipe(this.id);
      recipeNm = recipe.name;
      recipeImg = recipe.imgPath;
      recipeDesc = recipe.description;
      //periksa apakah recipe memiliki ingredient
      if (recipe['ingredients']){
        for (let ing of recipe.ingredients){
          recipeIngredients.push(
            new FormGroup({
              'name' : new FormControl(ing.name),
              'amount' : new FormControl(ing.amount)
            })
          );
        }
      }
    }
    this.recipeForm = new FormGroup({
      'name': new FormControl(recipeNm),
      'imgPath': new FormControl(recipeImg),
      'description': new FormControl(recipeDesc),
      //tambahkan ingredients disini
      'ingredients': recipeIngredients
    });
  }

  onSubmit(){
    console.log(this.recipeForm);
  }

  //getter untuk mengakses ingredients controls
  get ingredientsCtrl(){
    return (<FormArray>this.recipeForm.get('ingredients')).controls;
  }

}

Selanjutnya kita sinkronasikan dengan file template, buka recipe-edit.component.html, modifikasi yang dilakukan adalah menambahkan directive formArrayName, formGroupName dan formControlName pada bagian ingredients.

<div class="row">
    <div class="col-xs-12">
        <form [formGroup]="recipeForm" (ngSubmit)="onSubmit()">
            <div class="row">
                <div class="col-12">
                    <button type="submit" class="btn btn-success">Save</button>
                    <button type="submit" class="btn btn-danger">Cancel</button>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="form-group">
                        <label for="name">Name</label>
                        <input type="text" class="form-control" id="name" formControlName="name">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="form-group">
                        <label for="imgPath">Image URL</label>
                        <input type="text" class="form-control" id="imgPath" formControlName="imgPath">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <img src="" class="img-fluid.">
                </div>
            </div>            
            <div class="row">
                <div class="col-12">
                    <div class="form-group">
                        <label for="description">Description</label>
                        <textarea class="form-control" id="description" rows="5" formControlName="decription"></textarea>
                    </div>
                </div>
            </div>
            <div class="row mt-2">
                <!-- tambahkan directive formArrayName, bind dengan object form ingredients. -->
                <div class="col-12" formArrayName="ingredients">
                    <!-- tambahkan directive formGroupName -->
                    <div class="row" 
                    *ngFor="let ingCtrl of ingredientsCtrl; let i = index"
                    [formGroupName]="i">
                        <!-- tambahkan formControlName untuk setiap input type -->
                        <div class="col-8">
                            <input type="text" class="form-control" formControlName="name">
                        </div>
                        <div class="col-2">
                            <input type="number" class="form-control" formControlName="amount">
                        </div>
                        <div class="col-2">
                            <button class="btn btn-danger">X</button>
                        </div>                        
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

Sesuai ekspektasi, ingredients sudah bisa ditampilkan ketika recipe dipilih.

Pada modul selanjutnya akan diimplementasikan fungsi untuk menambah ingredient.