add mat angular

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

@@ -11,26 +11,34 @@
             <textarea matInput id="description" type="text" formControlName="description" required></textarea>
         </mat-form-field>
     </div>
+
     <div>
+        <label for="description">Ingrédients</label>
+
         <mat-form-field>
-            <label for="description">Ingrédients</label>
+            <mat-label>Ingrédients</mat-label>
-            <ul>
+            <mat-select matInput id="selectedIngredient" formControlName="selectedIngredient">
-                @for (ingredient of ingredientEntries; track ingredient.idIngredient) {
-                    <li>#{{ ingredient.idIngredient }} 
-                        <input matInput [(ngModel)]="ingredient.quantity" type="number" [ngModelOptions]="{standalone: true}">
-                    </li>
-                }
-            </ul>
-        </mat-form-field>
-        <mat-form-field>
-            <select matInput id="selectedIngredient" formControlName="selectedIngredient">
                 @for (ingredient of ingredients; track ingredient.id) {
-                    <option matInput [ngValue]="ingredient.id">{{ ingredient.name }}</option>
+                    <mat-option value="{{ingredient.id}}">{{ ingredient.name }}</mat-option>
                 }
-            </select>
+            </mat-select>
         </mat-form-field>
-
         <button type="button" (click)="onAddIngredient()">Add</button>
+
+
+
+
+        <ul>
+            @for (ingredient of ingredientEntries; track ingredient.idIngredient) {
+                <li>
+                    {{ getIngredient(ingredient.idIngredient).name }}
+                    <mat-form-field>
+                        <input matInput [(ngModel)]="ingredient.quantity" type="number" [ngModelOptions]="{standalone: true}">
+                    </mat-form-field>
+                </li>
+            }
+        </ul>
     </div>
+
     <button class="button" type="submit">Ajouter</button>
 </form>

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

@@ -23,6 +23,10 @@ export class RecipeAddComponent {
   ingredientEntries: IngredientEntry[] = [];
   ingredients: Ingredient[] = [];
 
+  getIngredient(n: number): Ingredient {
+    return this.ingredients.find(v => v.id === n)!
+  }
+
   #recipeId: number = -1;
   @Input()
   set recipeId(recipeId: string) {
@@ -41,7 +45,6 @@ export class RecipeAddComponent {
 
   constructor(private formBuilder: FormBuilder, private recipes: RecipeService, private router: Router) {
     this.ingredients = this.recipes.getAllIngredients();
-    console.log(this.ingredients);
   }
 
   onSubmit(): void {
@@ -65,13 +68,19 @@ export class RecipeAddComponent {
 
   onAddIngredient(): void {
     const value = this.createForm.value;
+    console.log(value);
+
     if (!value.selectedIngredient) {
       return;
     }
     const id = parseInt(value.selectedIngredient!);
     if (this.ingredientEntries.find((ingredient) => ingredient.idIngredient === id)) {
+      console.log("oh");
       return;
     }
+    console.log("ah");
+    console.log(this.ingredients.find(v => v.id === id)?.name)
+    console.log(this.ingredients);
     this.ingredientEntries.push({
       idIngredient: id,
       idRecipe: -1,