correction add recipe

src/app/recipe-add/recipe-add.component.html

@@ -11,7 +11,7 @@
            required
            #nameField="ngModel"
     >
-    <div *ngIf="nameField.invalid && (nameField.dirty || nameField.touched)" class="text-danger">
+    <div *ngIf="nameField.invalid && (nameField.dirty || nameField.touched || recipeForm.submitted)" class="text-danger">
       <div *ngIf="nameField.errors && nameField.errors['required']">Name is required.</div>
     </div>
   </div>
@@ -28,7 +28,7 @@
               #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.invalid && (descriptionField.dirty || descriptionField.touched || recipeForm.submitted)" class="text-danger">
       <div *ngIf="descriptionField.errors && descriptionField.errors['required']">Description is required.</div>
     </div>
   </div>
@@ -36,11 +36,8 @@
   <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)">
+      <input type="file" class="custom-file-input ms-1" id="image" (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>
 
@@ -63,8 +60,16 @@
         name="quantity_{{ ingredientId }}"
         min="1"
       />
+      <button mat-raised-button color="warn" type="button" (click)="removeIngredient(ingredientId)">Remove</button>
+    </div>
   </div>
+  <div *ngIf="getIngredientKeys().length === 0 && recipeForm.submitted" class="text-danger">
+    At least one ingredient is required.
   </div>
 
-  <button mat-raised-button type="submit" [disabled]="!recipeForm.form.valid">Add Recipe</button>
+  <!-- Bouton d'ajout de recette -->
+  <button mat-raised-button type="submit" [disabled]="!recipeForm.form.valid || getIngredientKeys().length === 0" [ngClass]="{'disabled-button': getIngredientKeys().length === 0}">
+    Add Recipe
+  </button>
 </form>
+

src/app/recipe-add/recipe-add.component.scss

@@ -0,0 +1,4 @@
+.disabled-button {
+    background-color: grey !important;
+    cursor: not-allowed !important;
+}

src/app/recipe-add/recipe-add.component.ts

@@ -29,6 +29,7 @@ export class RecipeAddComponent implements OnInit {
   selectedIngredient: number | null = null;
   imageError: string | null = null;
   maxDescriptionLength: number = 200; // Maximum length for description
+  isSubmitting: boolean = false; // Flag to prevent multiple submissions
 
   constructor(
     private ingredientService: IngredientService,
@@ -66,9 +67,14 @@ export class RecipeAddComponent implements OnInit {
   addIngredient(): void {
     if (this.selectedIngredient !== null && !this.ingredientQuantities[this.selectedIngredient]) {
       this.ingredientQuantities[this.selectedIngredient] = 1; // Default quantity
+      this.selectedIngredient = null; // Clear the selection
     }
   }
 
+  removeIngredient(id: number): void {
+    delete this.ingredientQuantities[id];
+  }
+
   getIngredientKeys(): number[] {
     return Object.keys(this.ingredientQuantities).map(key => parseInt(key, 10));
   }
@@ -79,15 +85,7 @@ export class RecipeAddComponent implements OnInit {
   }
 
   onSubmit(): void {
-    if (!this.recipe.name.trim() || !this.recipe.description.trim() || !this.recipe.image) {
-      alert('Please fill out Name, Description, and Image fields.');
-      return;
-    }
-
-    if (this.recipe.description.length > this.maxDescriptionLength) {
-      alert(`Description should not exceed ${this.maxDescriptionLength} characters.`);
-      return;
-    }
+    if (this.isSubmitting) return; // Prevent multiple submissions
 
     this.recipe.ingredients = this.getIngredientKeys().map(
       (id) => {
@@ -96,10 +94,14 @@ export class RecipeAddComponent implements OnInit {
       }
     );
 
+    this.isSubmitting = true; // Set flag to prevent multiple submissions
+
     const recipes = JSON.parse(localStorage.getItem('recipes') || '[]');
     this.recipe.id = recipes.length ? recipes[recipes.length - 1].id + 1 : 1;
     recipes.push(this.recipe);
     localStorage.setItem('recipes', JSON.stringify(recipes));
-    this.router.navigate(['/list']);
+    this.router.navigate(['/list']).then(() => {
+      this.isSubmitting = false; // Reset flag after navigation
+    });
   }
 }