component gemaakt van nieuwe klant toevoegen + correcte validatie email

src/app/pages/klanten/klanten.component.html

@@ -39,66 +39,7 @@
 </div>
 
 <app-modal title="Nieuwe klant toevoegen" *ngIf="showNewCustomer" (close)="toggleCustomerModal()">
-  <form [formGroup]="customerForm">
-    <tui-input
-      formControlName="firstName"
-      tuiTextfieldSize="m"
-      [tuiTextfieldCleaner]="true"
-    >
-      Voornaam
-      <input
-        tuiTextfieldLegacy
-        type="text"
-        id="input-voornaam"
-        formControlName="firstName"
-      />
-    </tui-input>
-    <br>
-
-    <tui-input
-      formControlName="lastName"
-      tuiTextfieldSize="m"
-      [tuiTextfieldCleaner]="true"
-    >
-      Achternaam
-      <input
-        tuiTextfieldLegacy
-        type="text"
-        id="input-achternaam"
-        formControlName="lastName"
-      />
-    </tui-input>
-    <br>
-    <tui-input
-      formControlName="email"
-      tuiTextfieldSize="m"
-      [tuiTextfieldCleaner]="true"
-    >
-      Email
-      <input
-        tuiTextfieldLegacy
-        autocomplete="email"
-        id="input-email"
-        type="email"
-        formControlName="email"
-      />
-    </tui-input>
-    <br>
-    <button
-      appearance="secondary"
-      size="m"
-      tuiButton
-      id="opslaanKlant"
-      (click)="saveCustomer()"
-      [disabled]="customerForm.invalid"
-      type="button">
-      <tui-icon
-        icon="@tui.save"
-        [style.height.rem]="1"
-      />
-      Opslaan
-    </button>
-  </form>
+  <app-new-customer (customerAdded)="saveCustomer()"></app-new-customer>
 </app-modal>
 
 <app-modal title="Klant bekijken" *ngIf="selectedCustomer != undefined" (close)="selectedCustomer = undefined">

src/app/pages/klanten/klanten.component.scss

@@ -40,6 +40,12 @@ h2 {
   padding: 12px 15px; /* Ruimte binnen de cellen */
 }
 
+.styled-table thead {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+
 .styled-table tbody tr {
   border-bottom: 1px solid #dddddd; /* Lichte scheidingslijn */
 }

src/app/pages/klanten/klanten.component.ts

@@ -7,6 +7,7 @@ import {ModalComponent} from '../../components/modal/modal.component';
 import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
 import {TuiInputCopyModule, TuiInputModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy';
 import {CustomerDetailsComponent} from '../../components/customer-details/customer-details.component';
+import {NewCustomerComponent} from '../../components/new-customer/new-customer.component';
 
 @Component({
   selector: 'app-klanten',
@@ -20,7 +21,8 @@ import {CustomerDetailsComponent} from '../../components/customer-details/custom
     TuiInputCopyModule,
     TuiInputModule,
     TuiTextfieldControllerModule,
-    CustomerDetailsComponent
+    CustomerDetailsComponent,
+    NewCustomerComponent
   ],
   templateUrl: './klanten.component.html',
   styleUrl: './klanten.component.scss'
@@ -48,15 +50,8 @@ export class KlantenComponent implements OnInit {
   }
 
   saveCustomer() {
-    const firstName = this.customerForm.get('firstName').value
-    const lastName = this.customerForm.get('lastName').value
-    const email = this.customerForm.get('email').value
-    const customer = new Customer(firstName, lastName, email);
-
-    this.customerService.addCustomer(customer).subscribe(() => {
-      this.showNewCustomer = false;
-      this.getCustomers()
-    })
+    this.showNewCustomer = false;
+    this.getCustomers()
   }
 
   getCustomers() {