summaryrefslogtreecommitdiff
path: root/recipeBuddy
diff options
context:
space:
mode:
authorTucker Evans <tuckerevans24@gmail.com>2019-12-08 15:38:08 -0500
committerTucker Evans <tuckerevans24@gmail.com>2019-12-08 15:50:46 -0500
commit99287dff749f7c6fa050b597115270496738d77c (patch)
treeb6ecea8c5bddf26d2aaa44035aa5fc3ecf59a06a /recipeBuddy
parent4efaeb517b94690483a14f25a224de73c0f1b055 (diff)
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).
Diffstat (limited to 'recipeBuddy')
-rw-r--r--recipeBuddy/src/app/add-recipe/add-recipe.component.html38
-rw-r--r--recipeBuddy/src/app/add-recipe/add-recipe.component.ts10
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]*$')]
})
);
}