refacto: improve backend validation directive

src/app/features/deposit/components/presentationals/deposit-form/deposit-form.presentational.html

@@ -4,7 +4,7 @@
 
   <mat-form-field *ngIf="getFormControl(formDefinition.organizationalUnitId) as fd">
     <mat-label>{{'deposit.organizationUnit' | translate }}</mat-label>
-    <mat-select dlcmValidation
+    <mat-select [dlcmValidation]="errors"
                 [formControl]="fd"
                 [required]="formValidationHelper.hasRequiredField(fd)"
                 (selectionChange)="orgUnitSelectionChange($event)"
@@ -15,27 +15,27 @@
         {{orgUnit.name}}
       </mat-option>
     </mat-select>
-    <mat-error>{{formValidationHelper.getFormError(fd)}}</mat-error>
+    <mat-error #errors></mat-error>
   </mat-form-field>
 
   <mat-form-field *ngIf="getFormControl(formDefinition.title) as fd">
     <input [formControl]="fd"
-           dlcmValidation
+           [dlcmValidation]="errors"
            matInput
            [placeholder]="'deposit.title' | translate"
            [required]="formValidationHelper.hasRequiredField(fd)"
     >
-    <mat-error>{{formValidationHelper.getFormError(fd)}}</mat-error>
+    <mat-error #errors></mat-error>
   </mat-form-field>
 
   <mat-form-field *ngIf="getFormControl(formDefinition.description) as fd">
     <input [formControl]="fd"
-           dlcmValidation
+           [dlcmValidation]="errors"
            matInput
            [placeholder]="'deposit.description' | translate"
            [required]="formValidationHelper.hasRequiredField(fd)"
     >
-    <mat-error>{{formValidationHelper.getFormError(fd)}}</mat-error>
+    <mat-error #errors></mat-error>
   </mat-form-field>
 
   <mat-form-field [matTooltip]="'deposit.tooltips.language' | translate"
@@ -47,7 +47,7 @@
   >
     <mat-label>{{'deposit.language' | translate }}</mat-label>
     <mat-select [formControl]="fd"
-                dlcmValidation
+                [dlcmValidation]="errors"
     >
       <mat-option *ngFor="let language of languages"
                   [value]="language.resId"
@@ -55,7 +55,7 @@
         {{language.code}}
       </mat-option>
     </mat-select>
-    <mat-error>{{formValidationHelper.getFormError(fd)}}</mat-error>
+    <mat-error #errors></mat-error>
   </mat-form-field>
 
   <mat-form-field [matTooltip]="'deposit.tooltips.publicationDate' | translate"
@@ -67,7 +67,7 @@
   >
     <input [formControl]="fd"
            matInput
-           dlcmValidation
+           [dlcmValidation]="errors"
            [matDatepicker]="publicationDateDatepicker"
            [placeholder]="'deposit.publicationDate' | translate"
            [required]="formValidationHelper.hasRequiredField(fd)"
@@ -78,7 +78,7 @@
     <mat-datepicker [touchUi]="breakpointService.isSmallerThanMd()"
                     #publicationDateDatepicker
     ></mat-datepicker>
-    <mat-error>{{formValidationHelper.getFormError(fd)}}</mat-error>
+    <mat-error #errors></mat-error>
   </mat-form-field>
 
   <mat-form-field [matTooltip]="'deposit.tooltips.collectionBegin' | translate"
@@ -90,7 +90,7 @@
   >
     <input [formControl]="fd"
            matInput
-           dlcmValidation
+           [dlcmValidation]="errors"
            [matDatepicker]="collectionBeginDatepicker"
            [placeholder]="'deposit.collectionBegin' | translate"
     >
@@ -100,7 +100,7 @@
     <mat-datepicker [touchUi]="breakpointService.isSmallerThanMd()"
                     #collectionBeginDatepicker
     ></mat-datepicker>
-    <mat-error>{{formValidationHelper.getFormError(fd)}}</mat-error>
+    <mat-error #errors></mat-error>
   </mat-form-field>
 
   <mat-form-field [matTooltip]="'deposit.tooltips.collectionEnd' | translate"
@@ -112,7 +112,7 @@
   >
     <input [formControl]="fd"
            matInput
-           dlcmValidation
+           [dlcmValidation]="errors"
            [matDatepicker]="collectionEndDatepicker"
            [placeholder]="'deposit.collectionEnd' | translate"
     >
@@ -122,7 +122,7 @@
     <mat-datepicker [touchUi]="breakpointService.isSmallerThanMd()"
                     #collectionEndDatepicker
     ></mat-datepicker>
-    <mat-error>{{formValidationHelper.getFormError(fd)}}</mat-error>
+    <mat-error #errors></mat-error>
   </mat-form-field>
 
 
@@ -179,7 +179,7 @@
   >
     <mat-label>{{'deposit.accessLevel' | translate }}</mat-label>
     <mat-select [formControl]="fd"
-                dlcmValidation
+                [dlcmValidation]="errors"
     >
       <mat-option *ngFor="let accessLevel of accessEnumValues"
                   [value]="accessLevel"
@@ -187,7 +187,7 @@
         {{accessLevel}}
       </mat-option>
     </mat-select>
-    <mat-error>{{formValidationHelper.getFormError(fd)}}</mat-error>
+    <mat-error #errors></mat-error>
   </mat-form-field>
 
   <mat-checkbox [matTooltip]="'deposit.tooltips.hasEmbargo' | translate"
@@ -202,6 +202,7 @@
                                         [matTooltip]="'deposit.tooltips.license' | translate"
                                         [matTooltipPosition]="'left'"
                                         [matTooltipShowDelay]="TIME_BEFORE_DISPLAY_TOOLTIP"
+                                        dlcmValidation
                                         aria-label="license tooltip"
                                         matTooltipClass="tooltip"
                                         [resourceNameSpace]="sharedLicenseActionNameSpace"
@@ -225,7 +226,7 @@
     <mat-label>{{'deposit.submissionPolicy' | translate }}</mat-label>
     <mat-select [formControl]="fd"
                 [required]="formValidationHelper.hasRequiredField(fd)"
-                dlcmValidation
+                [dlcmValidation]="errors"
                 [disabled]="this.listSubmissionPolicies < 1 || readonly"
     >
       <mat-option *ngFor="let submission of listSubmissionPolicies"
@@ -234,7 +235,7 @@
         {{submission.name}}
       </mat-option>
     </mat-select>
-    <mat-error>{{formValidationHelper.getFormError(fd)}}</mat-error>
+    <mat-error #errors></mat-error>
   </mat-form-field>
 
   <mat-form-field [matTooltip]="'deposit.tooltips.preservationPolicy' | translate"
@@ -247,7 +248,7 @@
     <mat-label>{{'deposit.preservationPolicy' | translate }}</mat-label>
     <mat-select [formControl]="fd"
                 [required]="formValidationHelper.hasRequiredField(fd)"
-                dlcmValidation
+                [dlcmValidation]="errors"
                 [disabled]="this.listPreservationPolicies < 1 || readonly"
     >
       <mat-option *ngFor="let preservation of listPreservationPolicies"
@@ -256,16 +257,16 @@
         {{preservation.name}}
       </mat-option>
     </mat-select>
-    <mat-error>{{formValidationHelper.getFormError(fd)}}</mat-error>
+    <mat-error #errors></mat-error>
   </mat-form-field>
 
   <div class="submit-button">
     <button *ngIf="!readonly"
             mat-flat-button
             color="primary"
-            [disabled]="!form.valid || !form.dirty"
             type="submit"
     >
+      <!--            [disabled]="!form.valid || !form.dirty"-->
       {{'deposit.submit' | translate }}
     </button>
   </div>

src/app/shared/directives/shared-validation/shared-validation.directive.ts

@@ -2,6 +2,7 @@ import {
   ChangeDetectorRef,
   Directive,
   ElementRef,
+  Input,
   OnInit,
   Renderer2,
   Self,
@@ -36,6 +37,9 @@ export class SharedValidationDirective extends SharedAbstractDirective implement
 
   private readonly _REGISTRY_INVALID_KEY: string = "INVALID";
 
+  @Input("dlcmValidation")
+  matError: any | undefined;
+
   constructor(@Self() private _ngControl: NgControl,
               private _elementRef: ElementRef,
               private _renderer: Renderer2,
@@ -145,6 +149,10 @@ export class SharedValidationDirective extends SharedAbstractDirective implement
       this.addError(this._REGISTRY_INVALID_KEY, this._translate.instant("validation.invalid"));
     }
 
+    if (this.matError) {
+      this.matError.textContent = FormValidationHelper.getFormError(this._ngControl.control);
+    }
+
     this._changeDetector.detectChanges();
   }
 }