providers create form added

2025-11-27 16:42:53 +01:00
parent 6235df5482
commit 20ddd65dc3
21 changed files with 422 additions and 0 deletions
@@ -0,0 +1,51 @@
+<form nz-form nzLayout="horizontal" [formGroup]="customerForm">
+    <nz-form-item>
+        <nz-form-label nzSpan="5" nzRequired> Nom </nz-form-label>
+        <nz-form-control nzSpan="22" nzErrorTip="Ce champ est requis !">
+            <input nz-input placeholder="Nom" formControlName="lastName">
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item>
+        <nz-form-label nzSpan="5" nzRequired>Prénom</nz-form-label>
+        <nz-form-control nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Prénom" formControlName="firstName">
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item>
+        <nz-form-label nzSpan="5" nzRequired>Téléphone</nz-form-label>
+        <nz-form-control nzErrorTip="Ce champ est requis !">
+            <input nz-input placeholder="Numéro de téléphone" formControlName="phoneNumber">
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item>
+        <nz-form-label nzSpan="5" nzRequired>Email</nz-form-label>
+        <nz-form-control nzErrorTip="Ce champ est requis !">
+            <input nz-input placeholder="Email" formControlName="email">
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item>
+        <nz-form-label nzSpan="5" nzRequired>Adresse</nz-form-label>
+        <nz-form-control nzErrorTip="Ce champ est requis !">
+            <input nz-input placeholder="Adresse" formControlName="address">
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item>
+        <nz-form-label nzSpan="5" nzRequired>Rôle</nz-form-label>
+        <nz-form-control nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Rôle" formControlName="role">
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item>
+        <nz-form-label nzSpan="5" nzRequired>Note</nz-form-label>
+        <nz-form-control nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Note" formControlName="note">
+        </nz-form-control>
+    </nz-form-item>
+
+</form>
@@ -0,0 +1,42 @@
+import { Component } from '@angular/core';
+import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from "@angular/forms";
+import {NzColDirective, NzRowDirective} from "ng-zorro-antd/grid";
+import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
+import {NzInputDirective} from "ng-zorro-antd/input";
+
+@Component({
+  selector: 'app-customers-add-form',
+    imports: [
+        FormsModule,
+        NzColDirective,
+        NzFormControlComponent,
+        NzFormDirective,
+        NzFormItemComponent,
+        NzFormLabelComponent,
+        NzInputDirective,
+        NzRowDirective,
+        ReactiveFormsModule
+    ],
+  templateUrl: './customers-add-form.html',
+  styleUrl: './customers-add-form.css',
+})
+export class CustomersAddForm {
+    customerForm = new FormGroup({
+        lastName: new FormControl<string>(null, [Validators.required]),
+        firstName: new FormControl<string>(null, [Validators.required]),
+        phoneNumber: new FormControl<string>(null, [Validators.required]),
+        email: new FormControl<string>(null, [Validators.required]),
+        address: new FormControl<string>(null, [Validators.required]),
+        role: new FormControl<string>(null, [Validators.required]),
+    })
+    submitForm() {
+        // Pour annuler si le formulaire est invalide
+        if (this.customerForm.invalid) return;
+
+        // Pour obtenir la valeur du formulaire
+        console.log(this.customerForm.getRawValue())
+
+        // Pour vider le formulaire
+        this.customerForm.reset()
+    }
+}