[Angular 2] [SOLVED] I can add recipe, but it appears blank in the list

[Angular 2] [SOLVED] I can add recipe, but it appears blank in the list
0

#1

Hey Angular 2 people!

I am getting closer on this Recipe Box. I can add a recipe, but when my recipeList component updates, it adds a blank row instead of a row with the new recipe name in it.

Here’s the recipe list component

import { Component } from '@angular/core';
import { RecipeService } from '../shared/recipes.service';


@Component({
  selector: 'ml-recipe-list',
  templateUrl: 'recipe-list.component.html',
  styleUrls: ['recipe-list.component.css'],
})

export class RecipeListComponent {
  
  recipes: Object;

   constructor(recipeService: RecipeService) {
     this.recipes = recipeService.getRecipes();
   }
  

}

// This is this component's template HTML
// <div class="list-group col-md-12">
//   <a href="#" class="list-group-item" *ngFor="let recipe of recipes">{{ recipe.name }}</a>
// </div> 

Here is the form component

import { Component } from '@angular/core';
import { RecipeService } from '../shared/recipes.service';

@Component({
  selector: 'ml-recipe-details',
  templateUrl: 'recipe-details.component.html',
  styleUrls: ['recipe-details.component.css'],
})
export class RecipeDetailsComponent {

  currentRecipe;

  constructor(private recipeService: RecipeService) {
    
  }

  onSubmit(form) {
     this.recipeService.addRecipes(form);

  }

  // onDelete() {
  //   console.log("DELETE REQUEST SENT TO SERVER FOR");
  // }
}

// Here's the HTML template for this component<!-- TODO: Update this using new forms module rules, so that I'm actually passing data -->
// <form #f="ngForm" (ngSubmit)="onSubmit(f.value)">
//   <div>
//     <label for="recipeName">Recipe Name</label>
//     <input
//       #recipeName="ngModel"
//       class="form-control"
//       ngModel
//       name="recipeName"
//       type="text"
//       required>
//       <div
//       *ngIf="recipeName.touched && !recipeName.valid"
//       class="alert alert-danger">Your recipe requires a name.
//     </div>
//   </div>
//   <div>
//     <label for="ingredients">Ingredients</label>
//     <textarea
//       #ingredients="ngModel"
//       class="form-control"
//       ngModel
//       name="ingredients"
//       type="textarea"
//       rows="10"
//       required></textarea>
//     <div
//       *ngIf="ingredients.touched && !ingredients.valid"
//       class="alert alert-danger">Your recipe requires ingredients
//     </div>
//   </div>
//   <div>
//     <label for="instructions">Instructions</label>
//     <textarea
//       #instructions="ngModel"
//       class="form-control"
//       ngModel
//       name="instructions"
//       type="textarea"
//       rows="10"></textarea>
//   </div>
//   <button type="submit" class="btn btn-primary" [disabled]="!f.valid">Save</button>
//   <button type="submit" class="btn btn-danger">Delete</button>
//   <p>form: {{ f.value | json }}</p>
//   <p>recipeName: {{ recipeName.value | json }}</p>
//   <p>ingredients: {{ ingredients.value | json }}</p>
//   <p>instructions: {{ instructions.value | json }}</p>
// </form>

Here is my service:

import { Injectable } from '@angular/core';

@Injectable()
export class RecipeService {
  
  recipeArray = [
    {name: "Peanut Tofu", ingredients: '', instructions: ''}, 
    {name: "Kale Chips", ingredients: '', instructions: ''}, 
    {name: "Red Lentil Daal", ingredients: '', instructions: ''}, 
    {name: "BBQ Seitan", ingredients: '', instructions: ''}
    ];
  
  //Eventually this should call the list of recipes from the database
  //For now, it is just returning a string array of hard coded recipes
  getRecipes() {
    return this.recipeArray;
  }

  //This does nothing at the moment, but should eventually allow us to add a new recipe to our recipe list
  //Once I figure out how the hell to do that
  addRecipes(form) {
    this.recipeArray.push(form);
    
  }
}

//And here is my service along with the current array of recipes that is mocking 
//what I might use an HTTP request for in the future.

Any ideas on why when I add a new recipe I am getting a blank row added to the recipe list component rather than one with the new recipe’s name?


#2

For posterity’s sake, the temporary variable of the input has to be the same as the keys in the object of the recipe in the service.

The temporary variable here has to be #name, not #recipeName

<input
      #name="ngModel"
      class="form-control"
      ngModel
      name="recipeName"
      type="text"
      required>

Because the key for the name of the recipe in the array of objects is “name”

recipeArray = [
    {name: "Peanut Tofu", ingredients: '', instructions: ''}, 
    {name: "Kale Chips", ingredients: '', instructions: ''}, 
    {name: "Red Lentil Daal", ingredients: '', instructions: ''}, 
    {name: "BBQ Seitan", ingredients: '', instructions: ''}
    ];