fix: show error when element is untouched

Author: wg102

frontend/src/app/resource-form/volume/volume.component.html

@@ -18,9 +18,10 @@
       matInput
       formControlName="name"
       *ngIf="volume.value.type == 'New'; else existingPvcControl"
+      [errorStateMatcher]="matcher"
     />
     <ng-template #existingPvcControl>
-      <mat-select formControlName="name">
+      <mat-select formControlName="name" [errorStateMatcher]="matcher">
         <mat-option *ngFor="let pvc of existingPVCs" [value]="pvc">{{
           pvc
         }}</mat-option>

frontend/src/app/resource-form/volume/volume.component.ts

@@ -1,10 +1,11 @@
 import { Component, OnInit, Input, OnDestroy } from "@angular/core";
-import { FormGroup, Validators, ValidatorFn, AbstractControl } from "@angular/forms";
+import { FormGroup, Validators, ValidatorFn, AbstractControl, FormControl, FormGroupDirective, NgForm } from "@angular/forms";
 import { Volume } from "src/app/utils/types";
 import { Subscription } from "rxjs";
 import { TranslateService } from "@ngx-translate/core";
 import { NamespaceService } from "src/app/services/namespace.service";
 import { KubernetesService } from "src/app/services/kubernetes.service";
+import {ErrorStateMatcher} from '@angular/material/core';
 
 @Component({
   selector: "app-volume",
@@ -18,6 +19,8 @@ export class VolumeComponent implements OnInit, OnDestroy {
 
   currentPVC: Volume;
   existingPVCs: Set<string> = new Set();
+  // Specific error matcher for volume name field
+  matcher = new PvcErrorStateMatcher();
 
   subscriptions = new Subscription();
 
@@ -188,7 +191,6 @@ export class VolumeComponent implements OnInit, OnDestroy {
 
   showNameError() {
     const volumeName = this.volume.get("name");
-
     if (volumeName.hasError("required")) {
       return this.translate.instant("volume.errorNameRequired");
     }
@@ -208,3 +210,11 @@ export class VolumeComponent implements OnInit, OnDestroy {
     };
   }
 }
+// Error when invalid control is dirty, touched, or submitted
+export class PvcErrorStateMatcher implements ErrorStateMatcher {
+  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+    const isSubmitted = form && form.submitted;
+    //Allows to control when volume is untouched but already assigned
+    return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted || !control.hasError("pattern")));
+  }
+}

frontend/src/assets/i18n/fr.json

@@ -127,7 +127,7 @@
     "lblName": "Nom",
     "errorNameRequired": "Le nom du volume ne peut pas être vide",
     "errorNamePattern": "Le nom du volume ne peut contenir que des caractères alphanumériques en minuscule, '-' ou '.', et doit commencer et se terminer par un caractères alphanumériques",
-    "errorMountedVolume":"Le volume est déjà monté sur un autre bloc note et ne peut être sélectionné actuellement",
+    "errorMountedVolume":"Le volume est déjà monté sur un autre bloc-notes et ne peut être sélectionné actuellement",
     "lblSize": "Taille",
     "lblMode": "Mode",
     "optReadWriteOnce": "ReadWriteOnce",