diff --git a/daidokoro/src/app/app.component.html b/daidokoro/src/app/app.component.html index 36093e1..318deed 100644 --- a/daidokoro/src/app/app.component.html +++ b/daidokoro/src/app/app.component.html @@ -1,336 +1 @@ - - - - - - - - - - - -
-
-
- -

Hello, {{ title }}

-

Congratulations! Your app is running. 🎉

-
- -
-
- @for (item of [ - { title: 'Explore the Docs', link: 'https://angular.dev' }, - { title: 'Learn with Tutorials', link: 'https://angular.dev/tutorials' }, - { title: 'CLI Docs', link: 'https://angular.dev/tools/cli' }, - { title: 'Angular Language Service', link: 'https://angular.dev/tools/language-service' }, - { title: 'Angular DevTools', link: 'https://angular.dev/tools/devtools' }, - ]; track item.title) { - - {{ item.title }} - - - - - } -
- -
-
-
- - - - - - - - - - - + diff --git a/daidokoro/src/app/app.component.ts b/daidokoro/src/app/app.component.ts index 2e2d8f8..253d1ea 100644 --- a/daidokoro/src/app/app.component.ts +++ b/daidokoro/src/app/app.component.ts @@ -1,10 +1,11 @@ import { Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; +import {RecipeFormComponent} from "./component/recipe-form/recipe-form.component"; @Component({ selector: 'app-root', standalone: true, - imports: [RouterOutlet], + imports: [RouterOutlet, RecipeFormComponent], templateUrl: './app.component.html', styleUrl: './app.component.css' }) diff --git a/daidokoro/src/app/component/recipe-form/recipe-form.component.css b/daidokoro/src/app/component/recipe-form/recipe-form.component.css new file mode 100644 index 0000000..e69de29 diff --git a/daidokoro/src/app/component/recipe-form/recipe-form.component.html b/daidokoro/src/app/component/recipe-form/recipe-form.component.html new file mode 100644 index 0000000..265e9fe --- /dev/null +++ b/daidokoro/src/app/component/recipe-form/recipe-form.component.html @@ -0,0 +1,14 @@ +
+ + + + + + + + + + +

Complete the form to enable the button.

+ +
diff --git a/daidokoro/src/app/component/recipe-form/recipe-form.component.spec.ts b/daidokoro/src/app/component/recipe-form/recipe-form.component.spec.ts new file mode 100644 index 0000000..eefd96c --- /dev/null +++ b/daidokoro/src/app/component/recipe-form/recipe-form.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RecipeFormComponent } from './recipe-form.component'; + +describe('RecipeFormComponent', () => { + let component: RecipeFormComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [RecipeFormComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(RecipeFormComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/daidokoro/src/app/component/recipe-form/recipe-form.component.ts b/daidokoro/src/app/component/recipe-form/recipe-form.component.ts new file mode 100644 index 0000000..e67befd --- /dev/null +++ b/daidokoro/src/app/component/recipe-form/recipe-form.component.ts @@ -0,0 +1,37 @@ +import {Component, EventEmitter, Output} from '@angular/core'; +import {Recipe} from "../../model/recipe.model"; +import {FormControl, FormGroup, ReactiveFormsModule} from "@angular/forms"; + +@Component({ + selector: 'app-recipe-form', + standalone: true, + imports: [ReactiveFormsModule], + templateUrl: './recipe-form.component.html', + styleUrl: './recipe-form.component.css' +}) +export class RecipeFormComponent { + @Output() formSubmitted = new EventEmitter(); + + recipeForm = new FormGroup({ + id: new FormControl('', { nonNullable: true }), + name: new FormControl('', { nonNullable: true }), + description: new FormControl('', { nonNullable: true }), + + }); + + + onSubmit() { + if(this.recipeForm.valid){ + const recipe: Recipe = { + $id: parseInt(this.recipeForm.value.id!), + $name: this.recipeForm.value.name!, + $description: this.recipeForm.value.description!, + $createdAt: new Date(), + $ingredients: [] + }; + this.formSubmitted.emit(recipe); + this.recipeForm.reset() + } + + } +} diff --git a/daidokoro/src/app/model/quantified-ingredient.model.ts b/daidokoro/src/app/model/quantified-ingredient.model.ts index 63157a9..edcea30 100644 --- a/daidokoro/src/app/model/quantified-ingredient.model.ts +++ b/daidokoro/src/app/model/quantified-ingredient.model.ts @@ -1,8 +1,8 @@ -import {Unite} from "./unity"; +import {Unity} from "./unity"; import {Ingredient} from "./ingredient.model"; export interface QuantifiedIngredient { $quantity : number, - $unit : Unite, + $unit : Unity, $ingredient : Ingredient }