feat: use mat label in mat-form-field (#1545)

Co-authored-by: Irmantas Kaukas <[email protected]>
dasch-swiss · Apr 15, 2024 · 2dd7f7d · 2dd7f7d
1 parent aca8800
commit 2dd7f7d
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 4 deletions.
diff --git a/apps/dsp-app/src/app/project/chip-list-input/chip-list-input.component.ts b/apps/dsp-app/src/app/project/chip-list-input/chip-list-input.component.ts
@@ -7,6 +7,7 @@ import { MatChipInputEvent } from '@angular/material/chips';
   selector: 'app-chip-list-input',
   template: `
     <mat-form-field style="width: 100%">
+      <mat-label>{{ ('appLabels.form.project.general.keywords' | translate) + (chipsRequired ? '' : '*') }}</mat-label>
       <mat-chip-grid #chipList>
         <mat-chip-row
           *ngFor="let tag of formArray.value; let index = index; trackBy: trackByFn"
@@ -16,7 +17,6 @@ import { MatChipInputEvent } from '@angular/material/chips';
         </mat-chip-row>
 
         <input
-          [placeholder]="('appLabels.form.project.general.keywords' | translate) + (chipsRequired ? '' : '*')"
           [matChipInputFor]="chipList"
           [matChipInputSeparatorKeyCodes]="separatorKeyCodes"
           [matChipInputAddOnBlur]="true"

diff --git a/apps/dsp-app/src/app/project/common-input/common-input.component.ts b/apps/dsp-app/src/app/project/common-input/common-input.component.ts
@@ -5,8 +5,9 @@ import { FormControl } from '@angular/forms';
   selector: 'app-common-input',
   template: `
     <mat-form-field style="width: 100%">
+      <mat-label>{{ placeholder }}</mat-label>
       <mat-icon matIconPrefix *ngIf="prefixIcon">{{ prefixIcon }}</mat-icon>
-      <input matInput [placeholder]="placeholder" [formControl]="control" />
+      <input matInput [formControl]="control" />
       <mat-error *ngIf="control.errors as errors">
         {{ errors | humanReadableError: validatorErrors }}
       </mat-error>

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
@@ -60,7 +60,7 @@ export class ReusableProjectFormComponent implements OnInit {
   form: ProjectForm;
   readonly shortcodePatternError = {
     errorKey: 'pattern',
-    message: 'This field must contains letters from A to F and 0 to 9',
+    message: 'This field must contain letters from A to F and 0 to 9',
   };
   readonly shortCodeExistsError = { errorKey: 'shortcodeExists', message: 'This shortcode already exists' };
   readonly keywordsValidators = [Validators.minLength(3), Validators.maxLength(64)];

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
@@ -7,6 +7,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatMenuModule } from '@angular/material/menu';
 import { NgxsStoreModule } from '@dasch-swiss/vre/shared/app-state';
+import { TranslateModule } from '@ngx-translate/core';
 import { HumanReadableErrorPipe } from './human-readable-error.pipe';
 import { MultiLanguageFormArray } from './multi-language-form-array.type';
 import { MultiLanguageFormService } from './multi-language-form.service';
@@ -30,10 +31,10 @@ import { MultiLanguageFormService } from './multi-language-form.service';
   template: `
     <div style="display: flex; flex-direction: row-reverse">
       <mat-form-field style="flex: 1" subscriptSizing="dynamic" class="formfield">
+        <mat-label>{{ placeholder }}</mat-label>
         <textarea
           matInput
           rows="9"
-          [placeholder]="placeholder"
           #textInput
           [readonly]="!editable"
           [ngModel]="formService.inputValue"