fix: display only one validation error for a form element at once

src/app/shared/forms/components/form-control-feedback/form-control-feedback.component.html

@@ -1,5 +1,7 @@
 <ng-container *ngIf="control.dirty && control.validator">
   <fa-icon class="form-control-feedback" *ngIf="this.control.valid; else invalid" [icon]="['fas', 'check']"></fa-icon>
   <ng-template #invalid> <fa-icon class="form-control-feedback" [icon]="['fas', 'times']"></fa-icon> </ng-template>
-  <small *ngFor="let e$ of errors" class="form-text"> {{ e$ | async }} </small>
+  <small *ngFor="let error of errors | slice: 0:1" class="form-text">
+    {{ error | translate }}
+  </small>
 </ng-container>

src/app/shared/forms/components/form-control-feedback/form-control-feedback.component.spec.ts

@@ -2,7 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormControl, Validators } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
-import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
 import { MockComponent } from 'ng-mocks';
 
 import { FormControlFeedbackComponent } from './form-control-feedback.component';
@@ -11,19 +11,12 @@ describe('Form Control Feedback Component', () => {
   let fixture: ComponentFixture<FormControlFeedbackComponent>;
   let component: FormControlFeedbackComponent;
   let element: HTMLElement;
-  let translateService: TranslateService;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [TranslateModule.forRoot()],
       declarations: [FormControlFeedbackComponent, MockComponent(FaIconComponent)],
     }).compileComponents();
-
-    translateService = TestBed.inject(TranslateService);
-    translateService.setDefaultLang('en');
-    translateService.use('en');
-    translateService.set('requiredkey', 'requiredmessage');
-    translateService.set('lengthkey', 'lengthmessage');
   });
 
   beforeEach(() => {
@@ -64,7 +57,7 @@ describe('Form Control Feedback Component', () => {
 
     expect(component.control.errors.minlength).toBeTruthy();
     expect(elements).toHaveLength(1);
-    expect(elements[0].nativeElement.textContent).toContain('lengthmessage');
+    expect(elements[0].nativeElement.textContent).toContain('lengthkey');
   });
 
   it('should show hidden existing error when marked as dirty', () => {

src/app/shared/forms/components/form-control-feedback/form-control-feedback.component.ts

@@ -1,7 +1,5 @@
 import { ChangeDetectionStrategy, Component, DoCheck, Input } from '@angular/core';
 import { AbstractControl } from '@angular/forms';
-import { TranslateService } from '@ngx-translate/core';
-import { Observable } from 'rxjs';
 
 interface FormErrorMessages {
   [key: string]: string;
@@ -16,17 +14,15 @@ export class FormControlFeedbackComponent implements DoCheck {
   @Input() messages: FormErrorMessages = {};
   @Input() control: AbstractControl;
 
-  errors: Observable<string>[];
-
-  constructor(private translate: TranslateService) {}
+  errors: string[];
 
   ngDoCheck() {
     if (this.control.dirty) {
       this.errors = this.getErrorList();
     }
   }
 
-  getErrorList(): Observable<string>[] {
+  getErrorList(): string[] {
     if (!this.control.errors) {
       return [];
     }
@@ -37,7 +33,6 @@ export class FormControlFeedbackComponent implements DoCheck {
           ? this.messages[key]
           : this.control.errors.customError
       )
-      .filter(locString => !!locString)
-      .map(locString => this.translate.get(locString));
+      .filter(locString => !!locString);
   }
 }