diff options
| author | Tucker Evans <tuckerevans24@gmail.com> | 2019-12-08 15:38:08 -0500 |
|---|---|---|
| committer | Tucker Evans <tuckerevans24@gmail.com> | 2019-12-08 15:50:46 -0500 |
| commit | 99287dff749f7c6fa050b597115270496738d77c (patch) | |
| tree | b6ecea8c5bddf26d2aaa44035aa5fc3ecf59a06a /recipeBuddy/src/app/add-recipe/add-recipe.component.html | |
| parent | 4efaeb517b94690483a14f25a224de73c0f1b055 (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/src/app/add-recipe/add-recipe.component.html')
| -rw-r--r-- | recipeBuddy/src/app/add-recipe/add-recipe.component.html | 38 |
1 files changed, 29 insertions, 9 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"> |