Add basic input validation to add recipe form

Validates: Name is required, Timer/Cook Time are digits,
Amount/Servings are numbers (digits with optional decimal point).

2 files changed, 34 insertions, 14 deletions

diff --git a/recipeBuddy/src/app/add-recipe/add-recipe.component.html b/recipeBuddy/src/app/add-recipe/add-recipe.component.html
index a8a3e5f..76095f9 100644
--- a/recipeBuddy/src/app/add-recipe/add-recipe.component.html
+++ b/recipeBuddy/src/app/add-recipe/add-recipe.component.html
@@ -3,19 +3,35 @@
 	<mat-form-field class="full-width">
 		<input matInput placeholder="Name" type="text"
 			formControlName="recipeName" required>
+		<mat-hint>
+			Name is required
+		</mat-hint>
+		<mat-error>
+			Name is required
+		</mat-error>
 	</mat-form-field>
 	<mat-form-field class="full-width">
 		<textarea matInput placeholder="Description"
 		formControlName="desc"> TEST </textarea>
 	</mat-form-field>
 	<mat-form-field class="full-width">
-		<input matInput placeholder="Servings" type=text formControlName="servingSize">
+		<input matInput placeholder="Servings" type=text
+		formControlName="servingSize" pattern="^[0-9]*(\.[0-9]*)?$">
+		<mat-error>
+			Servings must be a number.
+		</mat-error>
 	</mat-form-field>
 	<mat-form-field class="full-width">
-		<input matInput placeholder="Cooking Time" type="text" formControlName="cookTime">
+		
+		<input matInput placeholder="Cooking Time" type="text" formControlName="cookTime"
+		pattern="^[0-9]*$">
+		<span matSuffix>Minutes</span>
+		<mat-error>
+			Must be in the form hh:mm
+		</mat-error>
 	</mat-form-field>
 	<mat-form-field class="full-width" floatLabel="options.value.floatLabel">
-    <mat-label>Keywords/Tags</mat-label>
+		<mat-label>Keywords/Tags</mat-label>
 		<input matInput placeholder="Separate with a comma" type="text" formControlName="tags">
 	</mat-form-field>
 	<mat-form-field class="full-width" floatLabel="options.value.floatLabel">
@@ -25,7 +41,7 @@
 
 	<div formArrayName="ingredients">
 		<h3>Ingredients</h3>
-		<div *ngFor="let address of ingredients.controls; let i=index">
+		<div *ngFor="let ingr of ingredients.controls; let i=index">
 			<div [formGroupName]="i">
 				<h4>Ingredient {{ i + 1 }}</h4>
 				<div class="full-width">
@@ -34,8 +50,12 @@
 					formControlName="ingrName">
 				</mat-form-field>
 				<mat-form-field class="quarter-width">
-					<input matInput placeholder="Amount" type="text"
-					formControlName="amount">
+					<input matInput placeholder="Amount"
+					type="text"
+					formControlName="amount" pattern="^[0-9]*(\.[0-9]*)?$">
+					<mat-error>
+						Amount must be a number.
+					</mat-error>
 				</mat-form-field>
 				<mat-form-field class="quarter-width">
 					<input matInput placeholder="Units" type="text"
@@ -67,9 +87,9 @@
 					</textarea>
 				</mat-form-field>
 				<mat-form-field class="quarter-width">
-					<mat-label>Timer</mat-label>
-					<input matInput placeholder="hh:mm" type="text"
-					formControlName="timer">
+					<input matInput placeholder="Timer" type="text"
+					formControlName="timer" pattern="^[0-9]*$">
+					<span matSuffix>Minutes</span>
 				</mat-form-field>
 				<button matSuffix mat-mini-fab (click)="rmStep(i)"
 					type="button" style="margin-left: 10px">
diff --git a/recipeBuddy/src/app/add-recipe/add-recipe.component.ts b/recipeBuddy/src/app/add-recipe/add-recipe.component.ts
index b4f4d1e..50ea1cd 100644
--- a/recipeBuddy/src/app/add-recipe/add-recipe.component.ts
+++ b/recipeBuddy/src/app/add-recipe/add-recipe.component.ts
@@ -26,7 +26,7 @@ export class AddRecipeComponent {
     ingredients: this.fb.array([
       this.fb.group({
         ingrName: [''],
-        amount: [''],
+        amount: ['', Validators.pattern('^[0-9]*(\.[0-9]*)?$')],
         units: ['']
         })
     ]),
@@ -36,8 +36,8 @@ export class AddRecipeComponent {
         timer: ['']
         })
     ]),
-    servingSize: [''],
-    cookTime: [''],
+    servingSize: ['', Validators.pattern('^[0-9]*(\.[0-9]*)?$')],
+    cookTime: ['', Validators.pattern('^[0-9]*$')],
     tags: [''],
     photos: ['']
   });
@@ -57,7 +57,7 @@ export class AddRecipeComponent {
     this.ingredients.push(
     this.fb.group({
       ingrName: [''],
-      amount: [''],
+      amount: ['', Validators.pattern('^[0-9]*(\.[0-9]*)?$')],
       units: ['']
       })
   );
@@ -75,7 +75,7 @@ export class AddRecipeComponent {
     this.steps.push(
     this.fb.group({
       instruct: [''],
-      timer: ['']
+      timer: ['', Validators.pattern('^[0-9]*$')]
       })
   );
   }