recipe-edit.component.html

<div class="row">
  <div class="col-xs-12">
    <form [formGroup]="recipeForm" (ngSubmit)="onSubmit()">
      <div class="row">
        <div class="col-xs-12">
          <button
            type="submit"
            class="btn btn-success"
            [disabled]="!recipeForm.valid"
          >
            Save</button
          ><button type="button" class="btn btn-danger" (click)="onCancel()">
            Cancel
          </button>
        </div>
        <div class="row">
          <div class="col-xs-12">
            <div class="form-group">
              <label for="name">Name</label
              ><input
                type="text"
                name=""
                id="name"
                class="form-control"
                formControlName="name"
              />
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-xs-12">
            <div class="form-group">
              <label for="imagePath">Image URL</label
              ><input
                type="text"
                name=""
                id="imagePath"
                class="form-control"
                formControlName="imagePath"
                #imagePath
              />
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-xs-12">
            <img [src]="imagePath.value" class="img-responsive" />
          </div>
        </div>

        <div class="row">
          <div class="col-xs-12">
            <div class="form-group">
              <label for="description">Description</label
              ><textarea
                type="text"
                name=""
                id="description"
                class="form-control"
                rows="6"
                formControlName="description"
              ></textarea>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-xs-12" formArrayName="ingredients">
            <div
              class="row"
              *ngFor="let ingredientControl of getControls(); let i = index"
              [formGroupName]="i"
              style="margin-top: 10px;"
            >
              <div class="col-xs-8">
                <input
                  type="text"
                  class="form-control"
                  formControlName="name"
                />
              </div>
              <div class="col-xs-2">
                <input
                  type="number"
                  class="form-control"
                  formControlName="amount"
                />
              </div>
              <div class="col-xs-2">
                <button
                  type="button"
                  (click)="onDeleteIngredient(i)"
                  class="btn btn-danger"
                >
                  X
                </button>
              </div>
            </div>
            <hr />
            <div class="row">
              <div class="col-xs-12">
                <button
                  type="button"
                  class="btn btn-success"
                  (click)="onAddIngredient()"
                >
                  Add Ingredient
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>