You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
48 lines
1.9 KiB
48 lines
1.9 KiB
<h1>{{ 'recipe.add.link' | transloco }}</h1>
|
|
<form [formGroup]="recipeForm" (ngSubmit)="onSubmit()">
|
|
<p>
|
|
<mat-form-field appearance="fill">
|
|
<mat-label>Name</mat-label>
|
|
<input matInput formControlName="name">
|
|
</mat-form-field>
|
|
</p>
|
|
<p>
|
|
<mat-form-field appearance="fill">
|
|
<mat-label>Description</mat-label>
|
|
<textarea matInput formControlName="description"></textarea>
|
|
</mat-form-field>
|
|
</p>
|
|
<p>
|
|
<mat-form-field appearance="fill">
|
|
<mat-label>Image</mat-label>
|
|
<input matInput type="text" placeholder="No file chosen" [value]="filename" readonly>
|
|
<input type="file" formControlName="image" (change)="onFileChange($event)" hidden #fileInput>
|
|
<button mat-stroked-button type="button" timeout (click)="fileInput.click()">Browse</button>
|
|
</mat-form-field>
|
|
</p>
|
|
|
|
<div formArrayName="ingredients">
|
|
<h3>{{ 'recipe.ingredients' | transloco }}</h3>
|
|
<div *ngFor="let ingredient of ingredients.controls; let i = index" [formGroupName]="i" class="form-row">
|
|
<mat-form-field>
|
|
<mat-label>{{ 'recipe.ingredients' | transloco }}</mat-label>
|
|
<mat-select formControlName="name">
|
|
@for (ingredient of ingredientsOptions; track ingredient) {
|
|
<mat-option [value]="ingredient.name">{{ ingredient.name }}</mat-option>
|
|
}
|
|
</mat-select>
|
|
</mat-form-field>
|
|
<mat-form-field>
|
|
<mat-label>Quantity</mat-label>
|
|
<input matInput formControlName="qty">
|
|
</mat-form-field>
|
|
<button mat-stroked-button type="button" (click)="removeIngredient(i)">Remove</button>
|
|
<br>
|
|
</div>
|
|
<button mat-stroked-button type="button" (click)="addIngredient()">{{
|
|
'recipe.add.button-ingredients'|transloco }}</button>
|
|
</div>
|
|
|
|
<button class="form-submit" mat-stroked-button type="submit">{{ 'recipe.add.button-recipe' | transloco }}</button>
|
|
</form>
|