Adding Form Front, and verification of empty field or not
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
parent
7cc4820475
commit
4f43477810
@ -1,34 +1,134 @@
|
|||||||
<form [formGroup]="recipeForm" (ngSubmit)="onSubmit()">
|
<!DOCTYPE html>
|
||||||
<label for="id">ID: </label>
|
<html lang="en">
|
||||||
<input id="id" type="number" formControlName="id">
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Recipe Form</title>
|
||||||
|
<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>
|
</style>
|
||||||
<input id="name" type="text" formControlName="name">
|
</head>
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
<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="description">Description: </label>
|
<label for="ingredient-unit">Unit:</label>
|
||||||
<input id="description" type="text" formControlName="description">
|
<select id="ingredient-unit" formControlName="unit" required>
|
||||||
|
<option *ngFor="let unit of unity" [value]="unit">{{ unit }}</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
<div formArrayName="ingredients">
|
<label for="ingredient-name">Ingredient:</label>
|
||||||
<div *ngFor="let ingredient of ingredients.controls; let i=index" [formGroupName]="i">
|
<select id="ingredient-name" formControlName="ingredient" required>
|
||||||
<label for="ingredient-quantity">Quantity:</label>
|
<option *ngFor="let ingredient of ingredientsList" [value]="ingredient.$name">{{ ingredient.$name }}</option>
|
||||||
<input id="ingredient-quantity" type="number" formControlName="quantity">
|
</select>
|
||||||
|
|
||||||
<label for="ingredient-unit">Unit:</label>
|
<button type="button" class="remove-button" (click)="removeIngredient(i)">Remove</button>
|
||||||
<select id="ingredient-unit" formControlName="unit">
|
</div>
|
||||||
<option *ngFor="let unit of unity" [value]="unit">{{ unit }}</option>
|
</div>
|
||||||
</select>
|
<button type="button" class="add-ingredient-button" (click)="addIngredient()">Add Ingredient</button>
|
||||||
|
|
||||||
<label for="ingredient-name">Ingredient:</label>
|
<p>Completez le formulaire en entier pour pouvoir créer la recette.</p>
|
||||||
<select id="ingredient-name" formControlName="ingredient">
|
<button type="submit" class="submit-button" [disabled]="!recipeForm.valid">Submit</button>
|
||||||
<option *ngFor="let ingredient of ingredientsList" [value]="ingredient.$name">{{ ingredient.$name }}</option>
|
</form>
|
||||||
</select>
|
|
||||||
|
|
||||||
<button type="button" (click)="removeIngredient(i)">Remove</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</body>
|
||||||
<button type="button" (click)="addIngredient()">Add Ingredient</button>
|
</html>
|
||||||
|
|
||||||
<p>Complete the form to enable the button.</p>
|
|
||||||
<button type="submit" [disabled]="!recipeForm.valid">Submit</button>
|
|
||||||
</form>
|
|
||||||
|
|||||||
Loading…
Reference in new issue