Error: Uncaught (in promise): TypeError: Cannot read property 'length' of undefined


#1

new-recipe.ts

import { Recipe } from ‘./…/…/modal/recipe’;
import { Ingredient } from ‘./…/…/modal/ingredients’;
import { NgForm } from ‘@angular/forms’;
import { RecipesService } from ‘./…/…/services/recipes’;
import { FormGroup, FormControl, Validators, FormArray } from ‘@angular/forms’;

import { Component, OnInit } from ‘@angular/core’;
import { NavController, NavParams, ActionSheet, ActionSheetController, AlertController, ToastController } from ‘ionic-angular’;

@Component({
selector: ‘page-new-recipe’,
templateUrl: ‘new-recipe.html’,
})
export class NewRecipePage implements OnInit {

mode = ‘New’;
recipeForm: FormGroup;
recipe: Recipe;
index: number;

constructor(public navCtrl: NavController,
public navParams: NavParams,
public actionSheetCtrl: ActionSheetController,
public alertCtrl: AlertController,
private toastCtrl: ToastController,
private recipesService: RecipesService) {
}

ngOnInit() {
this.mode = this.navParams.get(‘mode’);
if (this.mode == ‘Edit’) {
this.recipe = this.navParams.get(‘recipe’);
this.index = this.navParams.get(‘index’);
}
this.initializeForm();
}

ionViewDidLoad() {
console.log(‘ionViewDidLoad NewRecipePage’);
}

newRecipe() {

this.navCtrl.push(NewRecipePage);

}

onSubmit() {
const value = this.recipeForm.value;
let ingredients: any[] = [];
if(value.ingredients.length > 0) {
ingredients = value.Ingredients.map(name => {
return {name: name, amount: 1};

  });
}
this.recipesService.addRecipe(value.title,
  value.description,
  value.difficulty,
  value.Ingredients);
  this.recipeForm.reset();
  this.navCtrl.popToRoot();

}
Manage() {
let actionSheet = this.actionSheetCtrl.create({
title: ‘What Do You Want To Do?’,
buttons: [
{
text: ‘Add Ingredient’,
role: ‘add’,
handler: () => {

        this.createNewIngredientAlert().present();
      }
    },{
      text: 'Remove All Ingredient',
      role: 'remove',
      handler: () => {
        console.log('Removed');
        const fArray: FormArray = <FormArray>this.recipeForm.get('ingredients');
        const len = fArray.length;
        if(len > 0) {
          for (let i = len - 1; i >= 0;i--){
            fArray.removeAt(i);
          }
          const toast = this.toastCtrl.create({
            message: 'All Ingredients were deleted',
            duration: 1500,
            position: 'bottom'

          })

          toast.present();
        }
      }
    },{
      text: 'Cancel',
      role: 'cancel',
      handler: () => {
        console.log('Cancel');
      }
    }

  ]

  

  
});

actionSheet.present();

}

private createNewIngredientAlert() {

return this.alertCtrl.create({
  title: 'Add Ingredient',
  inputs: [
    {
      name: 'name',
      placeholder: 'Name'
    }
  ],
  buttons: [
    {
    text: 'Cancel',
    handler: data => {
     
      console.log('Cancel clicked');
      
    }
  },
  {
    text: 'Add',
    handler: data => {
      
      if(data.name == '' || data.name == null){
        const toast = this.toastCtrl.create({
          message: 'Please enter a valid value!',
          duration: 1500,
          position: 'bottom'
        })

        toast.present();

        return;

      }
      (<FormArray>this.recipeForm.get('ingredients'))
      .push(new FormControl(data.name, Validators.required));

      const toast = this.toastCtrl.create({
        message: 'Items',
        duration: 1500,
        position: 'bottom'
      })

      toast.present();

      


      
    

    
    }
  }
  ]
});

}

private initializeForm() {
let title = null;
let description = null;
let difficulty = ‘Medium’;
let ingredients = [];

if(this.mode == 'Edit') {
  title = this.recipe.title;
  description = this.recipe.description;
  difficulty = this.recipe.difficulty;
  for(let ingredient of this.recipe.ingredients ){

    ingredients.push(new FormControl(ingredient.name,Validators.required));

  }


}



this.recipeForm = new FormGroup({
  'title': new FormControl(title, Validators.required),
  'description':new FormControl(description, Validators.required),
  'difficulty': new FormControl(difficulty, Validators.required),
  'ingredients' : new FormArray(ingredients)
});

}

}

Error: -

Error: Uncaught (in promise): TypeError: Cannot read property ‘length’ of undefined
TypeError: Cannot read property ‘length’ of undefined
at NewRecipePage.webpackJsonp.56.NewRecipePage.initializeForm


#2

You call const value = this.recipeForm.value;.
Check if value.ingredients exists.
If it doesn’t, then this line throws your error:
if(value.ingredients.length > 0) {

Also check if in

const fArray: FormArray = <FormArray>this.recipeForm.get('ingredients');
const len = fArray.length;

fArray is set correctly.

And check before this line
for(let ingredient of this.recipe.ingredients ){
if this.recipe.ingredients is set correctly.


#3

thank you for reply me but still i can’t solve this error i check all the points i don’t see any problem