add mat angular

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

@@ -20,6 +20,7 @@
             }
         </mat-form-field>
     </div>
+
     <div>
         <label for="image">Image</label>
         <button type="button" mat-raised-button (click)="fileInput.click()">Téléverser</button>
@@ -30,15 +31,20 @@
         <label for="description">Ingrédients</label>
         <ul>
             @for (ingredient of ingredientEntries; track ingredient.idIngredient) {
-                <li>#{{ ingredient.idIngredient }} <input [(ngModel)]="ingredient.quantity" type="number" [ngModelOptions]="{standalone: true}"></li>
+                <li>
+                    {{ getIngredient(ingredient.idIngredient).name }}
+                    <mat-form-field>
+                        <input matInput [(ngModel)]="ingredient.quantity" type="number" [ngModelOptions]="{standalone: true}">
+                    </mat-form-field>
+                </li>
             }
         </ul>
         <mat-form-field>
-            <select matInput id="selectedIngredient" formControlName="selectedIngredient">
+            <mat-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 mat-button type="button" (click)="onAddIngredient()">Add</button>
     </div>

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

@@ -6,11 +6,13 @@ import { RecipeService } from '../recipe.service';
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatButton } from '@angular/material/button';
+import { MatOption } from '@angular/material/core';
+import { MatSelect } from '@angular/material/select';
 
 @Component({
   selector: 'app-recipe-add',
   standalone: true,
-  imports: [ReactiveFormsModule, FormsModule, MatFormFieldModule, MatInputModule, MatButton, MatFormFieldModule],
+  imports: [ReactiveFormsModule, FormsModule, MatFormFieldModule, MatOption, MatSelect, MatInputModule, MatButton, MatFormFieldModule],
   templateUrl: './recipe-add.component.html',
 })
 export class RecipeAddComponent {
@@ -25,6 +27,9 @@ export class RecipeAddComponent {
   ingredients: Ingredient[] = [];
 
   selectedFilename: string = '';
+  getIngredient(n: number): Ingredient {
+    return this.ingredients.find(v => v.id === n)!
+  }
 
   #recipeId: number = -1;
   @Input()
@@ -47,7 +52,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 {
@@ -71,13 +75,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,