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',
 })

src/app/errors-dictionaries/name-and-company-field.ts

@@ -1,18 +1,17 @@
-import { inject } from '@angular/core';
+import { computed, inject, Signal, signal } from '@angular/core';
 import { Dictionary } from '../interfaces/dictionary.interface';
 import { LanguageManager } from '../services/language-manager';
 
 export class NameAndCompanyFieldsErrorsDictionary implements Dictionary {
   private readonly languageManager = inject(LanguageManager);
-  private readonly maxlen: string;
-  private readonly required = this.languageManager.strings.errorMessageRequired;
 
-  constructor() {
-    this.maxlen = this.languageManager.strings.errorMessageMaxLength(120);
-  }
-
-  getDictionary(): { [key: string]: string } {
-    const { maxlen, required } = this;
-    return { maxlen, required };
+  getDictionary(): Signal<{ [key: string]: string }> {
+    return computed(
+      () =>
+        this.languageManager.selectedLanguage$() && {
+          maxlen: this.languageManager.strings.errorMessageMaxLength(120),
+          required: this.languageManager.strings.errorMessageRequired,
+        }
+    );
   }
 }

src/app/errors-dictionaries/phone-field.ts

@@ -1,14 +1,17 @@
-import { inject } from '@angular/core';
+import { computed, inject, Signal } from '@angular/core';
 import { Dictionary } from '../interfaces/dictionary.interface';
 import { LanguageManager } from '../services/language-manager';
 
 export class PhoneFieldErroresDictionary implements Dictionary {
   languageManager = inject(LanguageManager);
-  pattern = this.languageManager.strings.errorMessagePhonePattern;
-  required = this.languageManager.strings.errorMessageRequired;
 
-  getDictionary(): { [key: string]: string } {
-    const { required, pattern } = this;
-    return { required, pattern };
+  getDictionary(): Signal<{ [key: string]: string }> {
+    return computed(
+      () =>
+        this.languageManager.selectedLanguage$() && {
+          pattern: this.languageManager.strings.errorMessagePhonePattern,
+          required: this.languageManager.strings.errorMessageRequired,
+        }
+    );
   }
 }

src/app/interfaces/dictionary.interface.ts

@@ -1,3 +1,5 @@
+import { Signal } from '@angular/core';
+
 export interface Dictionary {
-  getDictionary(): { [key: string]: string };
+  getDictionary(): Signal<{ [key: string]: string }>;
 }

src/app/pages/edit/edit.spec.ts

@@ -26,7 +26,10 @@ describe('Edit', () => {
       data: of({ contact: CONTACT_MOCK }),
     });
     contactService = jasmine.createSpyObj(ContactService.name, ['update']);
-    languageManager = jasmine.createSpyObj(LanguageManager.name, [], { strings: strings.en });
+    languageManager = jasmine.createSpyObj(LanguageManager.name, [], {
+      strings: strings.en,
+      selectedLanguage$: () => 'en',
+    });
     router = jasmine.createSpyObj(Router.name, ['navigate']);
 
     await TestBed.configureTestingModule({

src/environments/environment.development.ts

@@ -1,4 +1,4 @@
 export const environment = {
   prod: false,
-  apiUrl: 'http://192.168.1.3:4444',
+  apiUrl: 'http://192.168.1.3:8080',
 };