refactor: form header as content projection, formgroup as input

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

@@ -1,5 +1,6 @@
-<form  [formGroup]="form">
-    <legend>{{strings.addContact|upperfirst}}.<span>{{strings.allFieldRequired|upperfirst}}</span></legend>
+<form  [formGroup]="form()" (ngSubmit)="handleSubmit(form().value)">
+    <ng-content select="[slot='header']"></ng-content>
+    
     <div class="fields">
         <app-form-field 
             [errorsDictionary]="companyAndNameErrorsDictionary"

src/app/components/contact-form/contact-form.scss

@@ -1,20 +1,3 @@
-form {
-  legend {
-    display: inline-block;
-    font-family: var(--secondaryFont);
-    font-size: 2rem;
-    text-align: center;
-
-    span {
-      clear: both;
-      display: block;
-      font-size: 1rem;
-      margin-bottom: 2rem;
-      margin-top: 1rem;
-    }
-  }
-}
-
 .footer {
   display: flex;
   justify-content: flex-end;

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

@@ -1,11 +1,14 @@
-import { Component, inject } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { Component, inject, input, output } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
 import { FormField } from '../form-field/form-field';
 import { STRINGS_INJECTOR } from '../../app.config';
 import { SquaredBtn } from '../squared-btn/squared-btn';
 import { NameAndCompanyFieldsErrorsDictionary } from '../../errors-dictionaries/name-and-company-field';
 import { PhoneFieldErroresDictionary } from '../../errors-dictionaries/phone-field';
 import { UpperfirstPipe } from "../../pipes/upperfirst-pipe";
+import { ContactDTO } from '../../models/ContactDTO';
+import { ContactFormValue } from '../../types/ContactFormValue.type';
+import { FormGroupContact } from '../../utils/form-group-contact';
 
 @Component({
   selector: 'app-contact-form',
@@ -14,13 +17,16 @@ import { UpperfirstPipe } from "../../pipes/upperfirst-pipe";
   styleUrl: './contact-form.scss',
 })
 export class ContactForm {
-  form = new FormGroup({
-    name: new FormControl(null, [Validators.required, Validators.maxLength(55)]),
-    company: new FormControl(null, [Validators.required, Validators.maxLength(55)]),
-    phone: new FormControl(null, [Validators.required, Validators.pattern( /^(\+?[\d]){12,15}$/ )]),
-  });
+  contact = output<ContactDTO>();
+  form = input(new FormGroupContact());
   protected strings = inject(STRINGS_INJECTOR);
   protected companyAndNameErrorsDictionary = new NameAndCompanyFieldsErrorsDictionary().getDictionary();
   protected phoneErrorsDictionary = new PhoneFieldErroresDictionary().getDictionary();
 
+  handleSubmit(contactForm: ContactFormValue) {
+    if(contactForm.company === null || contactForm.name === null || contactForm.phone === null) return;
+    const contact = new ContactDTO(undefined,  contactForm.name, contactForm.company, contactForm.phone);
+    this.contact.emit(contact);
+    this.form().reset();
+  }
 }

src/app/types/ContactFormValue.type.ts

@@ -0,0 +1 @@
+export type ContactFormValue = Partial<{name: string|null, company: string|null, phone: string|null}>;