refactor: form field validation dict to signal for multilang

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

@@ -3,19 +3,19 @@
     
     <div class="fields">
         <app-form-field 
-            [errorsDictionary]="companyAndNameErrorsDictionary"
+            [errorsDictionary]="companyAndNameErrorsDictionary()"
             formControlName="name"
             [label]="(languageManager.strings.name|upperfirst) + ':'"
             [placeholder]="languageManager.strings.contactsName|upperfirst"
         />
         <app-form-field 
-            [errorsDictionary]="companyAndNameErrorsDictionary"
+            [errorsDictionary]="companyAndNameErrorsDictionary()"
             formControlName="company"
             [label]="(languageManager.strings.company|upperfirst) + ':'"
             [placeholder]="languageManager.strings.contactsCompany|upperfirst"
         />
         <app-form-field
-            [errorsDictionary]="phoneErrorsDictionary"
+            [errorsDictionary]="phoneErrorsDictionary()"
             formControlName="phone"
             [label]="(languageManager.strings.phone|upperfirst) +':'"
             [placeholder]="languageManager.strings.contactsPhone|upperfirst"

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

@@ -12,7 +12,10 @@ describe('ContactForm', () => {
   let languageManager: jasmine.SpyObj<LanguageManager>;
 
   beforeEach(async () => {
-    languageManager = jasmine.createSpyObj(LanguageManager.name, [], { strings: strings.en });
+    languageManager = jasmine.createSpyObj(LanguageManager.name, [], {
+      strings: strings.en,
+      selectedLanguage$: () => 'en',
+    });
 
     await TestBed.configureTestingModule({
       imports: [ContactForm],

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

@@ -12,7 +12,7 @@
     <div>
         @for(error of errorsDictionary()|keyvalue; track error.key) {
             @if(control.hasError(error.key) && isDirty){
-                <p class="error-text">• {{error.value}}</p>
+                <p class="error-text">• {{error.value|upperfirst}}</p>
             }
         }
     </div>

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

@@ -1,10 +1,11 @@
 import { KeyValuePipe } from '@angular/common';
 import { Component, computed, input, Optional, Self, signal } from '@angular/core';
 import { ControlValueAccessor, NgControl, ReactiveFormsModule } from '@angular/forms';
+import { UpperfirstPipe } from '../../pipes/upperfirst-pipe';
 
 @Component({
   selector: 'app-form-field',
-  imports: [ReactiveFormsModule, KeyValuePipe],
+  imports: [ReactiveFormsModule, KeyValuePipe, UpperfirstPipe],
   templateUrl: './form-field.html',
   styleUrl: './form-field.scss',
 })