1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { FormBuilder } from '@angular/forms';
import { FormArray } from '@angular/forms';
@Component({
selector: 'app-add-recipe',
templateUrl: './add-recipe.component.html',
styleUrls: ['./add-recipe.component.css']
})
export class AddRecipeComponent {
recipeForm = this.fb.group({
recipeName: [''],
desc: [''],
ingredients: this.fb.array([
this.fb.group({
ingrName: [''],
amount: [''],
units: ['']
})
]),
steps: this.fb.array([
this.fb.group({
instruct: [''],
timer: ['']
})
]),
servingSize: [''],
cookTime: [''],
tags: [''],
photos: ['']
});
constructor(private fb: FormBuilder) { }
ngOnInit() {
}
get ingredients() {
return this.recipeForm.get('ingredients') as FormArray;
}
addIngredient() {
this.ingredients.push(
this.fb.group({
ingrName: [''],
amount: [''],
units: ['']
})
);
}
get steps() {
return this.recipeForm.get('steps') as FormArray;
}
addStep() {
this.steps.push(
this.fb.group({
instruct: [''],
timer: ['']
})
);
}
}
|
