diff options
| -rw-r--r-- | recipeBuddy/src/app/add-recipe/add-recipe.component.html | 38 | ||||
| -rw-r--r-- | recipeBuddy/src/app/add-recipe/add-recipe.component.ts | 10 |
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]*$')] }) ); } |