diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 094fe7e..4e6fef1 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,6 +1,6 @@
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
@@ -35,7 +35,8 @@ import { RecipeEditComponent } from './recipes/recipe-edit/recipe-edit.component
],
imports: [
BrowserModule,
- FormsModule,
+ FormsModule,
+ ReactiveFormsModule,
HttpModule,
AppRoutingModule
],
diff --git a/src/app/recipes/recipe-edit/recipe-edit.component.html b/src/app/recipes/recipe-edit/recipe-edit.component.html
index 786f11f..8540643 100644
--- a/src/app/recipes/recipe-edit/recipe-edit.component.html
+++ b/src/app/recipes/recipe-edit/recipe-edit.component.html
@@ -1,3 +1,81 @@
-
- recipe-edit works!
-
+
\ No newline at end of file
diff --git a/src/app/recipes/recipe-edit/recipe-edit.component.ts b/src/app/recipes/recipe-edit/recipe-edit.component.ts
index 738c7bd..093c1f3 100644
--- a/src/app/recipes/recipe-edit/recipe-edit.component.ts
+++ b/src/app/recipes/recipe-edit/recipe-edit.component.ts
@@ -1,5 +1,7 @@
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
+import { FormGroup, FormControl } from '@angular/forms';
+import { RecipeService } from '../recipe.service';
@Component({
selector: 'app-recipe-edit',
@@ -9,16 +11,41 @@ import { ActivatedRoute, Params } from '@angular/router';
export class RecipeEditComponent implements OnInit {
id: number;
editMode: boolean = false;
+ recipeForm: FormGroup
- constructor(private route: ActivatedRoute) { }
+ constructor(private route: ActivatedRoute,
+ private recipeService: RecipeService) { }
ngOnInit() {
this.route.params.subscribe(
(params: Params) => {
this.id = +params['id'];
this.editMode = params['id'] != null;
+ this.initForm();
}
);
}
+ onSubmit() {
+ console.log(this.recipeForm);
+ }
+
+ private initForm() {
+ let recipeName = '';
+ let recipeImagePath = '';
+ let recipeDescription = '';
+
+ if (this.editMode) {
+ const recipe = this.recipeService.getRecipe(this.id);
+ recipeName = recipe.name;
+ recipeImagePath = recipe.imagePath;
+ recipeDescription = recipe.description;
+ }
+
+ this.recipeForm = new FormGroup({
+ 'name': new FormControl(recipeName),
+ 'imagePath': new FormControl(recipeImagePath),
+ 'description': new FormControl(recipeDescription)
+ });
+ }
}