composant plantForm + model

src/app/modules/admin/components/formulaire/formulaire.component.html

@@ -1 +1,126 @@
-<p>formulaire works!</p>
+<form (ngSubmit)="onSubmit()" [formGroup]="plantForm">
+  <div class="form-floating">
+    <input
+      type="text"
+      class="form-control"
+      id="floatingInputName"
+      placeholder=""
+      name="name"
+      formControlName="nameFc"
+      [ngClass]="{
+        'is-valid':
+          plantForm.controls['nameFc'].touched &&
+          plantForm.controls['nameFc'].valid,
+        'is-invalid':
+          plantForm.controls['nameFc'].touched &&
+          !plantForm.controls['nameFc'].valid
+      }"
+    />
+    <label for="floatingInputName">Nom</label>
+  </div>
+  <div class="form-floating">
+    <input
+      type="text"
+      class="form-control"
+      id="floatingInputPrice"
+      placeholder=""
+      name="price"
+      formControlName="priceFc"
+      [ngClass]="{
+        'is-valid':
+          plantForm.controls['priceFc'].touched &&
+          plantForm.controls['priceFc'].valid,
+        'is-invalid':
+          plantForm.controls['priceFc'].touched &&
+          !plantForm.controls['priceFc'].valid
+      }"
+    />
+    <label for="floatingInputPrice">Prix</label>
+  </div>
+  <div class="form-floating">
+    <input
+      type="number"
+      class="form-control"
+      id="floatingInputQuantity"
+      placeholder=""
+      name="quantity"
+      formControlName="quantityFc"
+      [ngClass]="{
+        'is-valid':
+          plantForm.controls['quantityFc'].touched &&
+          plantForm.controls['quantityFc'].valid,
+        'is-invalid':
+          plantForm.controls['quantityFc'].touched &&
+          !plantForm.controls['quantityFc'].valid
+      }"
+    />
+    <label for="floatingInputQuantity">Quantité</label>
+  </div>
+  <div class="form-floating">
+    <input
+      type="text"
+      class="form-control"
+      id="floatingCategory"
+      placeholder=""
+      name="category"
+      formControlName="categoryFc"
+      [ngClass]="{
+        'is-valid':
+          plantForm.controls['categoryFc'].touched &&
+          plantForm.controls['categoryFc'].valid,
+        'is-invalid':
+          plantForm.controls['categoryFc'].touched &&
+          !plantForm.controls['categoryFc'].valid
+      }"
+    />
+    <label for="floatingInputCategory">Catégorie</label>
+  </div>
+  <div class="form-floating">
+    <input
+      type="number"
+      class="form-control"
+      id="floatingRating"
+      placeholder=""
+      name="rating"
+      formControlName="ratingFc"
+      [ngClass]="{
+        'is-valid':
+          plantForm.controls['ratingFc'].touched &&
+          plantForm.controls['ratingFc'].valid,
+        'is-invalid':
+          plantForm.controls['ratingFc'].touched &&
+          !plantForm.controls['ratingFc'].valid
+      }"
+    />
+    <label for="floatingRating">Note</label>
+  </div>
+  <div class="form-floating select">
+    <select
+      class="form-control"
+      id="floatingInputInStock"
+      placeholder=""
+      name="inStock"
+      formControlName="inStockFc"
+    >
+      <option value="disponible">Disponible</option>
+      <option value="partiellement disponible">Partiellement disponible</option>
+      <option value="non disponible">Non disponible</option>
+    </select>
+    <label value="disponible">Sélectionnez disponibilité</label>
+  </div>
+
+  <button
+    class="w-100 btn btn-lg btn-outline-success"
+    type="submit"
+    [disabled]="plantForm.invalid"
+  >
+    Créer une plante
+  </button>
+  <button
+    class="w-100 btn btn-lg btn-outline-success"
+    type="submit"
+    [disabled]="plantForm.invalid"
+  >
+    Modifier une plante
+  </button>
+</form>

src/app/modules/admin/components/formulaire/formulaire.component.ts

@@ -1,15 +1,17 @@
 import { Component, OnInit } from '@angular/core';
+import { FormGroup } from '@angular/forms';
 
 @Component({
   selector: 'app-formulaire',
   templateUrl: './formulaire.component.html',
-  styleUrls: ['./formulaire.component.scss']
+  styleUrls: ['./formulaire.component.scss'],
 })
 export class FormulaireComponent implements OnInit {
+  plantForm!: FormGroup;
+  constructor() {}
 
-  constructor() { }
+  ngOnInit(): void {}
-
-  ngOnInit(): void {
-  }
 
+  onSubmit(){}
 }
+

src/app/modules/admin/models/category.spec.ts

@@ -0,0 +1,7 @@
+import { Category } from './category';
+
+describe('Category', () => {
+  it('should create an instance', () => {
+    expect(new Category()).toBeTruthy();
+  });
+});

src/app/modules/admin/models/category.ts

@@ -0,0 +1,3 @@
+export class Category {
+  name: string[]=['plantes vertes'];
+}

src/app/modules/admin/models/plant.spec.ts

@@ -0,0 +1,7 @@
+import { Plant } from './plant';
+
+describe('Plant', () => {
+  it('should create an instance', () => {
+    expect(new Plant()).toBeTruthy();
+  });
+});

src/app/modules/admin/models/plant.ts

@@ -0,0 +1,14 @@
+import { Category } from "./category";
+
+export class Plant {
+  constructor(
+    public name: string='',
+    public price: number =1,
+    public quantity: number= 0,
+    public instock: boolean= true,
+    public category:Category,
+    public urlPicture: string = "https//picsum.photos/id/18/200/300",
+    public rating: number = 0,
+    public id?: number
+  ){}
+}