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