fix: improve multi language input touched behavior, add validators (#…

…1463)
dasch-swiss · Feb 13, 2024 · c70e1cf · c70e1cf
1 parent 6cbec6b
commit c70e1cf
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 12 deletions.
diff --git a/apps/dsp-app/src/app/project/reusable-project-form/reusable-project-form.component.ts b/apps/dsp-app/src/app/project/reusable-project-form/reusable-project-form.component.ts
@@ -64,7 +64,7 @@ export class ReusableProjectFormComponent implements OnInit, OnDestroy {
   shortcodePatternError = { errorKey: 'pattern', message: 'This field must contains letters from A to F and 0 to 9' };
   shortCodeExistsError = { errorKey: 'shortcodeExists', message: 'This shortcode already exists' };
   readonly keywordsValidators = [Validators.minLength(3), Validators.maxLength(64)];
-  readonly descriptionValidators = [Validators.maxLength(2000)];
+  readonly descriptionValidators = [Validators.minLength(3), Validators.maxLength(40960)];
   subscription: Subscription;
 
   constructor(
@@ -98,7 +98,7 @@ export class ReusableProjectFormComponent implements OnInit, OnDestroy {
         { value: this.formData.shortname, disabled: this.formData.shortname !== '' },
         [Validators.required, Validators.minLength(3), Validators.maxLength(20), Validators.pattern(/^[a-zA-Z]+\S*$/)],
       ],
-      longname: [this.formData.longname, [Validators.required]],
+      longname: [this.formData.longname, [Validators.required, Validators.minLength(3), Validators.maxLength(256)]],
       description: this._fb.array(
         this.formData.description.map(({ language, value }) =>
           this._fb.group({

diff --git a/libs/vre/shared/app-string-literal/src/lib/multi-language-form.service.ts b/libs/vre/shared/app-string-literal/src/lib/multi-language-form.service.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, ElementRef, Injectable } from '@angular/core';
+import { ChangeDetectorRef, Injectable } from '@angular/core';
 import { FormArray, FormBuilder, FormControl, FormGroup, ValidatorFn } from '@angular/forms';
 import { UserSelectors } from '@dasch-swiss/vre/shared/app-state';
 import { Store } from '@ngxs/store';

diff --git a/libs/vre/shared/app-string-literal/src/lib/multi-language-input.component.ts b/libs/vre/shared/app-string-literal/src/lib/multi-language-input.component.ts
@@ -51,6 +51,7 @@ import { MultiLanguageFormService } from './multi-language-form.service';
         #textInput
         [ngModel]="formService.inputValue"
         (ngModelChange)="formService.onInputChange($event)"
+        (blur)="formService.formArray.markAsTouched()"
         [readonly]="!editable" />
     </mat-form-field>
     <mat-error *ngIf="formService.formArray.invalid && formService.formArray.touched">

diff --git a/libs/vre/shared/app-string-literal/src/lib/multi-language-textarea.component.ts b/libs/vre/shared/app-string-literal/src/lib/multi-language-textarea.component.ts
@@ -36,6 +36,7 @@ import { MultiLanguageFormService } from './multi-language-form.service';
           #textInput
           [readonly]="!editable"
           [ngModel]="formService.inputValue"
+          (blur)="formService.formArray.markAsTouched()"
           (ngModelChange)="formService.onInputChange($event)"></textarea>
       </mat-form-field>
       <mat-button-toggle-group matPrefix #group="matButtonToggleGroup" vertical>
@@ -48,15 +49,17 @@ import { MultiLanguageFormService } from './multi-language-form.service';
         </mat-button-toggle>
       </mat-button-toggle-group>
     </div>
-    <mat-error *ngIf="formService.formArray.invalid && formService.formArray.touched">
-      <ng-container *ngIf="formService.invalidErrors?.language"
-        >Language {{ formService.invalidErrors.language }}:
-        {{ formService.invalidErrors.error | humanReadableError }}
-      </ng-container>
-      <ng-container *ngIf="!formService.invalidErrors?.language"
-        >{{ formService.invalidErrors.error | humanReadableError }}
-      </ng-container>
-    </mat-error>
+    <div class="mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align ng-tns-c1205077789-8">
+      <mat-error *ngIf="formService.formArray.invalid && formService.formArray.touched">
+        <ng-container *ngIf="formService.invalidErrors?.language"
+          >Language {{ formService.invalidErrors.language }}:
+          {{ formService.invalidErrors.error | humanReadableError }}
+        </ng-container>
+        <ng-container *ngIf="!formService.invalidErrors?.language"
+          >{{ formService.invalidErrors.error | humanReadableError }}
+        </ng-container>
+      </mat-error>
+    </div>
   `,
   styles: [
     `