Creating Supplier Page

src/app/components/supplier-form/supplier-form.html

@@ -0,0 +1,66 @@
+<form nz-form nzLayout="horizontal" [formGroup]="supplierForm" (ngSubmit)="submitForm()">
+
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9" nzRequired>
+            Fournisseur
+        </nz-form-label>
+        <nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Fournisseur" formControlName="name">
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9" nzRequired>
+            Email
+        </nz-form-label>
+        <nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Email" formControlName="email">
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9" nzRequired>
+            Téléphone
+        </nz-form-label>
+        <nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Téléphone" formControlName="phone">
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9" nzRequired>
+            Adresse
+        </nz-form-label>
+        <nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Adresse" formControlName="address">
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9" nzRequired>
+            Ville
+        </nz-form-label>
+        <nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Ville" formControlName="city">
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9" nzRequired>
+            Délai Moyen
+        </nz-form-label>
+        <nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Délai Moyen" formControlName="deliveryDelay">
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item nz-flex>
+        <nz-form-label nzSpan="9" nzRequired>
+            Produits
+        </nz-form-label>
+        <nz-form-control nzSpan="12" nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Produits" formControlName="product">
+        </nz-form-control>
+    </nz-form-item>
+
+</form>

src/app/components/supplier-form/supplier-form.ts

@@ -0,0 +1,45 @@
+import { Component } from '@angular/core';
+import {NzColDirective} from "ng-zorro-antd/grid";
+import {NzFlexDirective} from "ng-zorro-antd/flex";
+import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
+import {NzInputDirective} from "ng-zorro-antd/input";
+import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
+
+@Component({
+    selector: 'app-supplier-form',
+    imports: [
+        NzColDirective,
+        NzFlexDirective,
+        NzFormControlComponent,
+        NzFormDirective,
+        NzFormItemComponent,
+        NzFormLabelComponent,
+        NzInputDirective,
+        ReactiveFormsModule
+    ],
+    templateUrl: './supplier-form.html',
+    styleUrl: './supplier-form.css',
+})
+export class SupplierForm {
+    supplierForm: FormGroup = new FormGroup({
+        name: new FormControl<string>(null, [Validators.required]),
+        email: new FormControl<string>(null, [Validators.required]),
+        phone: new FormControl<string>(null, [Validators.required]),
+        address: new FormControl<string>(null, [Validators.required]),
+        city: new FormControl<string>(null, [Validators.required]),
+        deliveryDelay: new FormControl<string>(null, [Validators.required]),
+        product: new FormControl<string>(null, [Validators.required]),
+
+    })
+
+    submitForm() {
+        // Pour annuler si le formulaire est invalide
+        if (this.supplierForm.invalid) return;
+
+        // Pour obtenir la valeur du formulaire
+        console.log(this.supplierForm.getRawValue())
+
+        // Pour vider le formulaire
+        this.supplierForm.reset()
+    }
+}