feat: add contact form

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

@@ -0,0 +1,29 @@
+<form  [formGroup]="form">
+    <legend>{{strings.addContact|upperfirst}}.<span>{{strings.allFieldRequired|upperfirst}}</span></legend>
+    <div class="fields">
+        <app-form-field 
+            [errorsDictionary]="companyAndNameErrorsDictionary"
+            formControlName="name"
+            [label]="(strings.name|upperfirst) + ':'"
+            placeholder="Contact's name"
+        />
+        <app-form-field 
+            [errorsDictionary]="companyAndNameErrorsDictionary"
+            formControlName="company"
+            [label]="(strings.company|upperfirst) + ':'"
+            placeholder="Contact's company"
+        />
+        <app-form-field
+            [errorsDictionary]="phoneErrorsDictionary"
+            formControlName="phone"
+            [label]="(strings.phone|upperfirst) +':'"
+            placeholder="Contact's phone"
+            type="tel"
+        />
+    </div>
+    <div class="footer">
+        <app-squared-btn 
+            [text]="strings.add"
+        ></app-squared-btn>
+    </div>
+</form>

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

@@ -0,0 +1,44 @@
+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;
+  padding: 0.5rem 0;
+
+  app-squared-btn {
+    display: flex;
+    width: 100%;
+  }
+}
+
+@media (min-width: 768px) {
+  app-form-field {
+    flex: 0 0 calc(33.33% - 1rem);
+  }
+
+  .fields {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .footer {
+    app-squared-btn {
+      width: auto;
+    }
+  }
+}

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

@@ -0,0 +1,27 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContactForm } from './contact-form';
+import { STRINGS_INJECTOR } from '../../app.config';
+import { strings } from '../../strings';
+
+describe('ContactForm', () => {
+  let component: ContactForm;
+  let fixture: ComponentFixture<ContactForm>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ContactForm],
+      providers: [{ provide: STRINGS_INJECTOR, useValue: strings }],
+    })
+    .compileComponents();
+
+    TestBed.inject(STRINGS_INJECTOR);
+    fixture = TestBed.createComponent(ContactForm);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,26 @@
+import { Component, inject } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } 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";
+
+@Component({
+  selector: 'app-contact-form',
+  imports: [FormField, ReactiveFormsModule, SquaredBtn, UpperfirstPipe],
+  templateUrl: './contact-form.html',
+  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}$/ )]),
+  });
+  protected strings = inject(STRINGS_INJECTOR);
+  protected companyAndNameErrorsDictionary = new NameAndCompanyFieldsErrorsDictionary().getDictionary();
+  protected phoneErrorsDictionary = new PhoneFieldErroresDictionary().getDictionary();
+
+}