diff options
author | chrisundercoffer <55003067+chrisundercoffer@users.noreply.github.com> | 2019-12-09 17:08:51 -0500 |
---|---|---|
committer | GitHub <noreply@github.com> | 2019-12-09 17:08:51 -0500 |
commit | 67b9f6678c6c588f231bce1f658adfe0e11321ab (patch) | |
tree | bc42a10b22ef6402bdbb41794eee584a56737920 /recipeBuddy/src/app/add-recipe/add-recipe.component.html | |
parent | 5cf3689290666f70cd631d7b3d40a2ed245a3fce (diff) | |
parent | 2a46419961ab4db50146434945a57859893f8d54 (diff) |
Merge pull request #14 from tuckerevans/add_page
Add Recipe Page
Diffstat (limited to 'recipeBuddy/src/app/add-recipe/add-recipe.component.html')
-rw-r--r-- | recipeBuddy/src/app/add-recipe/add-recipe.component.html | 109 |
1 files changed, 109 insertions, 0 deletions
diff --git a/recipeBuddy/src/app/add-recipe/add-recipe.component.html b/recipeBuddy/src/app/add-recipe/add-recipe.component.html new file mode 100644 index 0000000..76095f9 --- /dev/null +++ b/recipeBuddy/src/app/add-recipe/add-recipe.component.html @@ -0,0 +1,109 @@ +<form [formGroup]="recipeForm" class="form" (ngSubmit)="onSubmit()"> +<h2>Add Recipe</h2> + <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" 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" + 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> + <input matInput placeholder="Separate with a comma" type="text" formControlName="tags"> + </mat-form-field> + <mat-form-field class="full-width" floatLabel="options.value.floatLabel"> + <mat-label>Photos (URLS)</mat-label> + <input matInput placeholder="Separate with a comma" type="text" formControlName="photos"> + </mat-form-field> + + <div formArrayName="ingredients"> + <h3>Ingredients</h3> + <div *ngFor="let ingr of ingredients.controls; let i=index"> + <div [formGroupName]="i"> + <h4>Ingredient {{ i + 1 }}</h4> + <div class="full-width"> + <mat-form-field class="quarter-width"> + <input matInput placeholder="Name" type="text" + formControlName="ingrName"> + </mat-form-field> + <mat-form-field class="quarter-width"> + <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" + formControlName="units"> + </mat-form-field> + <button matSuffix mat-mini-fab (click)="rmIngredient(i)" + type="button" style="margin-left: 10px"> + <mat-icon>remove</mat-icon> + </button> + </div> + </div> + </div> + <div style="text-align: center"> + <button mat-mini-fab (click)="addIngredient()" + type="button"> + <mat-icon>add</mat-icon> + </button> + </div> + </div> + + <div formArrayName="steps"> + <h3>Steps</h3> + <div *ngFor="let address of steps.controls; let i=index"> + <div [formGroupName]="i"> + <h4>Step {{ i + 1 }}</h4> + <div class="ful-width"> + <mat-form-field class="half-width"> + <textarea matInput placeholder="Instructions" type="text" formControlName="instruct"> + </textarea> + </mat-form-field> + <mat-form-field class="quarter-width"> + <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"> + <mat-icon>remove</mat-icon> + </button> + </div> + </div> + </div> + <div style="text-align: center"> + <button mat-mini-fab (click)="addStep()" matSuffix type="button"> + <mat-icon>add</mat-icon> + </button> + </div> + </div> + <button mat-flat-button color="primary" type="submit" + [disabled]="!recipeForm.valid">Submit</button> +</form> |