Merge pull request 'formFront' (#6) from formFront into master
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
Reviewed-on: #6master
commit
49ae2dc7f6
@ -1,41 +1,138 @@
|
||||
<form [formGroup]="recipeForm" (ngSubmit)="onSubmit()">
|
||||
<label for="id">ID: </label>
|
||||
<input id="id" type="number" formControlName="id" required>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #bab6b6;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
.form-container {
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
.form-container h2 {
|
||||
margin-top: 0;
|
||||
}
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.form-group input,
|
||||
.form-group select,
|
||||
.form-group button {
|
||||
width: 97%;
|
||||
padding: 10px;
|
||||
margin-top: 5px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.form-group button {
|
||||
background-color: black;
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.form-group button:hover {
|
||||
background-color: #525259;
|
||||
}
|
||||
.form-group .remove-button {
|
||||
background-color: red;
|
||||
}
|
||||
.form-group .remove-button:hover {
|
||||
background-color: darkred;
|
||||
}
|
||||
.add-ingredient-button {
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
}
|
||||
.add-ingredient-button:hover {
|
||||
background-color: #45a049;
|
||||
}
|
||||
.submit-button {
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
.submit-button:hover {
|
||||
background-color: #525259;
|
||||
}
|
||||
.error-message {
|
||||
color: red;
|
||||
font-size: 0.9em;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.form-group.invalid input,
|
||||
.form-group.invalid select {
|
||||
border-color: red;
|
||||
}
|
||||
|
||||
<label for="name">Name: </label>
|
||||
<input id="name" type="text" formControlName="name" required>
|
||||
</style>
|
||||
<body>
|
||||
<div class="form-container">
|
||||
<h2>Ajouter une Recette</h2>
|
||||
<form [formGroup]="recipeForm" (ngSubmit)="onSubmit()">
|
||||
<div class="form-group" [class.invalid]="recipeForm.get('id')?.invalid && recipeForm.get('id')?.touched">
|
||||
<label for="id">ID: </label>
|
||||
<input id="id" type="number" formControlName="id" required>
|
||||
<div class="error-message" *ngIf="recipeForm.get('id')?.invalid && recipeForm.get('id')?.touched">
|
||||
L'ID est requis.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label for="description">Description: </label>
|
||||
<input id="description" type="text" formControlName="description" required>
|
||||
<div class="form-group" [class.invalid]="recipeForm.get('name')?.invalid && recipeForm.get('name')?.touched">
|
||||
<label for="name">Name: </label>
|
||||
<input id="name" type="text" formControlName="name" required>
|
||||
<div class="error-message" *ngIf="recipeForm.get('name')?.invalid && recipeForm.get('name')?.touched">
|
||||
Le nom est requis.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label for="image">Image: </label>
|
||||
<input id="image" type="file" (change)="onFileChange($event)">
|
||||
<div class="form-group" [class.invalid]="recipeForm.get('description')?.invalid && recipeForm.get('description')?.touched">
|
||||
<label for="description">Description: </label>
|
||||
<input id="description" type="text" formControlName="description" required>
|
||||
<div class="error-message" *ngIf="recipeForm.get('description')?.invalid && recipeForm.get('description')?.touched">
|
||||
La description est requise.
|
||||
</div>
|
||||
</div>
|
||||
<label for="image">Image: </label>
|
||||
<input id="image" type="file" (change)="onFileChange($event)">
|
||||
|
||||
<div *ngIf="imageBase64">
|
||||
<img [src]="imageBase64" alt="Selected Image" style="max-width: 200px; max-height: 200px;">
|
||||
</div>
|
||||
<br>
|
||||
<div *ngIf="imageBase64">
|
||||
<img [src]="imageBase64" alt="Selected Image" style="max-width: 200px; max-height: 200px;">
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<div formArrayName="ingredients">
|
||||
<div *ngFor="let ingredient of ingredients.controls; let i=index" [formGroupName]="i">
|
||||
<label for="ingredient-quantity">Quantity:</label>
|
||||
<input id="ingredient-quantity" type="number" formControlName="quantity" required>
|
||||
<div formArrayName="ingredients">
|
||||
<div *ngFor="let ingredient of ingredients.controls; let i=index" [formGroupName]="i" class="form-group">
|
||||
<label for="ingredient-quantity">Quantity:</label>
|
||||
<input id="ingredient-quantity" type="number" formControlName="quantity" required>
|
||||
|
||||
<label for="ingredient-unit">Unit:</label>
|
||||
<select id="ingredient-unit" formControlName="unit" required>
|
||||
<option *ngFor="let unit of unity" [value]="unit">{{ unit }}</option>
|
||||
</select>
|
||||
<label for="ingredient-unit">Unit:</label>
|
||||
<select id="ingredient-unit" formControlName="unit" required>
|
||||
<option *ngFor="let unit of unity" [value]="unit">{{ unit }}</option>
|
||||
</select>
|
||||
|
||||
<label for="ingredient-name">Ingredient:</label>
|
||||
<select id="ingredient-name" formControlName="ingredient" required>
|
||||
<option *ngFor="let ingredient of ingredientsList" [value]="ingredient.$name">{{ ingredient.$name }}</option>
|
||||
</select>
|
||||
<label for="ingredient-name">Ingredient:</label>
|
||||
<select id="ingredient-name" formControlName="ingredient" required>
|
||||
<option *ngFor="let ingredient of ingredientsList" [value]="ingredient.$name">{{ ingredient.$name }}</option>
|
||||
</select>
|
||||
|
||||
<button type="button" (click)="removeIngredient(i)">Remove</button>
|
||||
<button type="button" class="remove-button" (click)="removeIngredient(i)">Remove</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="button" (click)="addIngredient()">Add Ingredient</button>
|
||||
<button type="button" class="add-ingredient-button" (click)="addIngredient()">Add Ingredient</button>
|
||||
|
||||
<p>Complete the form to enable the button.</p>
|
||||
<button type="submit" [disabled]="!recipeForm.valid">Submit</button>
|
||||
</form>
|
||||
<p>Complete the form to enable the button.</p>
|
||||
<button type="submit" class="submit-button" [disabled]="!recipeForm.valid">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
Loading…
Reference in new issue