parent
c5b01c39db
commit
c65d6b029c
@ -1,4 +1,7 @@
|
||||
<app-menu></app-menu>
|
||||
<main>
|
||||
<router-outlet></router-outlet>
|
||||
</main>
|
||||
<body class="ms-5">
|
||||
<app-menu></app-menu>
|
||||
<main>
|
||||
<router-outlet></router-outlet>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
|
||||
@ -1,37 +1,70 @@
|
||||
<form (ngSubmit)="onSubmit()" #recipeForm="ngForm">
|
||||
<div>
|
||||
<label for="name">Name:</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
[(ngModel)]="recipe.name"
|
||||
name="name"
|
||||
required
|
||||
/>
|
||||
<form (ngSubmit)="onSubmit(); recipeForm.ngSubmit.emit()" #recipeForm="ngForm" class="ng-submitted">
|
||||
|
||||
<div class="form-group my-2 col-md-4">
|
||||
<label for="name">Name</label>
|
||||
<input class="form-control"
|
||||
placeholder="Name"
|
||||
type="text"
|
||||
id="name"
|
||||
[(ngModel)]="recipe.name"
|
||||
name="name"
|
||||
required
|
||||
#nameField="ngModel"
|
||||
>
|
||||
<div *ngIf="nameField.invalid && (nameField.dirty || nameField.touched)" class="text-danger">
|
||||
<div *ngIf="nameField.errors && nameField.errors['required']">Name is required.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="description">Description:</label>
|
||||
<textarea
|
||||
id="description"
|
||||
[(ngModel)]="recipe.description"
|
||||
name="description"
|
||||
required
|
||||
|
||||
<div class="form-group my-2 col-md-4">
|
||||
<label for="description">Description</label>
|
||||
<textarea class="form-control"
|
||||
id="description"
|
||||
[(ngModel)]="recipe.description"
|
||||
name="description"
|
||||
required
|
||||
rows="2"
|
||||
maxlength="{{ maxDescriptionLength }}"
|
||||
#descriptionField="ngModel"
|
||||
></textarea>
|
||||
<div class="text-muted text-end">Characters left: {{ maxDescriptionLength - recipe.description.length }}</div>
|
||||
<div *ngIf="descriptionField.invalid && (descriptionField.dirty || descriptionField.touched)" class="text-danger">
|
||||
<div *ngIf="descriptionField.errors && descriptionField.errors['required']">Description is required.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="image">Image:</label>
|
||||
<input type="file" id="image" (change)="onFileChange($event)" />
|
||||
<div *ngIf="imageError" style="color: red">{{ imageError }}</div>
|
||||
|
||||
<div class="form-group my-3">
|
||||
<div class="custom-file">
|
||||
<label for="image">Image</label>
|
||||
<input type="file" class="custom-file-input ms-1" id="image" required (change)="onFileChange($event)">
|
||||
<div *ngIf="imageError" style="color: red">{{ imageError }}</div>
|
||||
<div *ngIf="recipeForm.submitted && recipeForm.invalid && !recipeForm.controls['image'].valid" class="text-danger">
|
||||
Image is required.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngFor="let ingredient of ingredients">
|
||||
<label>
|
||||
{{ ingredient.name }}:
|
||||
|
||||
<mat-form-field class="my-3 me-3">
|
||||
<mat-label>Ingredients</mat-label>
|
||||
<mat-select [(ngModel)]="selectedIngredient" name="selectedIngredient">
|
||||
<mat-option *ngFor="let ingredient of ingredients" [value]="ingredient.id">
|
||||
{{ ingredient.name }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<button class="me-3" mat-raised-button type="button" (click)="addIngredient()">Add Ingredient</button>
|
||||
<div class="mb-3" *ngFor="let ingredientId of getIngredientKeys()">
|
||||
<div>
|
||||
{{ findIngredientName(ingredientId) }}
|
||||
<input
|
||||
type="number"
|
||||
[(ngModel)]="ingredientQuantities[ingredient.id]"
|
||||
name="quantity{{ ingredient.id }}"
|
||||
[(ngModel)]="ingredientQuantities[ingredientId]"
|
||||
name="quantity_{{ ingredientId }}"
|
||||
min="1"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" [disabled]="!recipeForm.form.valid">Add Recipe</button>
|
||||
|
||||
<button mat-raised-button type="submit" [disabled]="!recipeForm.form.valid">Add Recipe</button>
|
||||
</form>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
/* You can add global styles to this file, and also import other style files */
|
||||
@import "bootstrap/dist/css/bootstrap.min.css";
|
||||
|
||||
html, body { height: 100%; }
|
||||
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
|
||||
|
||||
Loading…
Reference in new issue