+
+ Preparation Time (minutes)
+
+ @if (recipeFormGroup.controls.preparationTime.hasError("pattern")) {
+ Must be a valid number.
+ }
+
+
+
+ Cooking Time (minutes)
+
+ @if (recipeFormGroup.controls.cookingTime.hasError("pattern")) {
+ Must be a valid number.
+ }
+
+
+
+ Total Time (minutes)
+
+ @if (recipeFormGroup.controls.totalTime.hasError("pattern")) {
+ Must be a valid number.
+ }
+
+
+
Recipe Text
Recipe Text
@@ -106,5 +134,5 @@
(input)="onRecipeTextChange($event)"
>
-
+
diff --git a/src/app/pages/recipe-upload-page/steps/enter-recipe-data/enter-recipe-data.ts b/src/app/pages/recipe-upload-page/steps/enter-recipe-data/enter-recipe-data.ts
index af810dc..692f354 100644
--- a/src/app/pages/recipe-upload-page/steps/enter-recipe-data/enter-recipe-data.ts
+++ b/src/app/pages/recipe-upload-page/steps/enter-recipe-data/enter-recipe-data.ts
@@ -13,7 +13,7 @@ import {
viewChild,
} from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
-import { MatFormField, MatInput, MatLabel } from '@angular/material/input';
+import { MatError, MatFormField, MatInput, MatLabel } from '@angular/material/input';
import { MatButton } from '@angular/material/button';
import { EnterRecipeDataSubmitEvent } from './EnterRecipeDataSubmitEvent';
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
@@ -67,6 +67,7 @@ import { ImageView } from '../../../../shared/models/ImageView.model';
CdkDrag,
DatePipe,
ImageSelect,
+ MatError,
],
templateUrl: './enter-recipe-data.html',
styleUrl: './enter-recipe-data.css',
@@ -83,6 +84,9 @@ export class EnterRecipeData implements OnInit {
protected readonly recipeFormGroup = new FormGroup({
title: new FormControl('', Validators.required),
slug: new FormControl('', Validators.required),
+ preparationTime: new FormControl('', Validators.pattern(/^\d+$/)),
+ cookingTime: new FormControl('', Validators.pattern(/^\d+$/)),
+ totalTime: new FormControl('', Validators.pattern(/^\d+$/)),
text: new FormControl('', Validators.required),
});
@@ -106,6 +110,9 @@ export class EnterRecipeData implements OnInit {
this.recipeFormGroup.patchValue({
title: draft.title ?? '',
slug: draft.slug ?? '',
+ preparationTime: draft.preparationTime?.toString() ?? '',
+ cookingTime: draft.cookingTime?.toString() ?? '',
+ totalTime: draft.totalTime?.toString() ?? '',
text: draft.rawText ?? '',
});
if (draft.ingredients) {
@@ -204,6 +211,16 @@ export class EnterRecipeData implements OnInit {
this.ingredientsTable()!.renderRows();
}
+ private getTime(s?: string | null): number | null {
+ if (!s) return null;
+ try {
+ return parseInt(s);
+ } catch (e) {
+ console.error(`Should not have had a parse error because of form validators: ${e}`);
+ return null;
+ }
+ }
+
protected onSubmit(event: SubmitEvent): void {
event.preventDefault();
const value = this.recipeFormGroup.value;
@@ -211,6 +228,9 @@ export class EnterRecipeData implements OnInit {
title: value.title!,
slug: value.slug!,
ingredients: this.ingredientModels().map((ingredientModel) => ingredientModel.draft),
+ preparationTime: this.getTime(value.preparationTime),
+ cookingTime: this.getTime(value.cookingTime),
+ totalTime: this.getTime(value.totalTime),
mainImage: this.mainImage(),
rawText: value.text!,
});
diff --git a/src/app/shared/services/RecipeDraftService.ts b/src/app/shared/services/RecipeDraftService.ts
index 5745819..a7d636c 100644
--- a/src/app/shared/services/RecipeDraftService.ts
+++ b/src/app/shared/services/RecipeDraftService.ts
@@ -86,7 +86,7 @@ export class RecipeDraftService {
amount?: string | null;
name: string;
notes?: string | null;
- }>;
+ }> | null;
mainImage?: ImageView | null;
rawText?: string | null;
},