From 38a6aa60cca113dca8da8985743e7b9504f968af Mon Sep 17 00:00:00 2001
From: "florian.azizian" <florian.azizian@maarch.org>
Date: Wed, 21 Mar 2018 18:38:10 +0100
Subject: [PATCH] FEAT #207 begin display message when input is invalid

---
 .../Views/status-administration.component.html            | 3 ++-
 .../app/administration/status-administration.component.ts | 8 ++++++++
 apps/maarch_entreprise/js/angular/lang/lang-en.ts         | 5 ++++-
 apps/maarch_entreprise/js/angular/lang/lang-fr.ts         | 3 +++
 4 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/apps/maarch_entreprise/Views/status-administration.component.html b/apps/maarch_entreprise/Views/status-administration.component.html
index 11544632051..7604ead5243 100755
--- a/apps/maarch_entreprise/Views/status-administration.component.html
+++ b/apps/maarch_entreprise/Views/status-administration.component.html
@@ -27,11 +27,12 @@
                     <div class="form-group">
                         <div class="col-sm-12">
                             <mat-form-field>
-                                <input matInput [(ngModel)]="status.id" *ngIf="creationMode" maxlength="10" name="id" id="id" title="{{lang.id}}" placeholder="{{lang.id}}" (blur)="isAvailable()" 
+                                <input matInput [formControl]="statusId" [(ngModel)]="status.id" *ngIf="creationMode" maxlength="10" name="id" id="id" title="{{lang.id}}" placeholder="{{lang.id}}" (blur)="isAvailable()" 
                                     type="text" pattern="^[\w.-]*$" required>
                                 <i *ngIf="creationMode" class="fa fa-circle-o" aria-hidden="true" [ngStyle]="{'color': statusIdAvailable ? 'green' : 'red'}"></i>
                                 <input matInput [(ngModel)]="status.id" *ngIf="!creationMode" maxlength="10" name="id" id="id" title="{{lang.id}}" placeholder="{{lang.id}}" 
                                     required disabled>
+                                <mat-error *ngIf="statusId.invalid">{{getErrorMessage()}}</mat-error>
                             </mat-form-field>
                         </div>
                     </div>
diff --git a/apps/maarch_entreprise/js/angular/app/administration/status-administration.component.ts b/apps/maarch_entreprise/js/angular/app/administration/status-administration.component.ts
index 0126e8e3a3f..261eb6e873f 100644
--- a/apps/maarch_entreprise/js/angular/app/administration/status-administration.component.ts
+++ b/apps/maarch_entreprise/js/angular/app/administration/status-administration.component.ts
@@ -4,6 +4,7 @@ import { HttpClient } from '@angular/common/http';
 import { Router, ActivatedRoute } from '@angular/router';
 import { LANG } from '../translate.component';
 import { NotificationService } from '../notification.service';
+import { FormControl, Validators} from '@angular/forms';
 
 declare function $j(selector: any): any;
 
@@ -36,6 +37,13 @@ export class StatusAdministrationComponent implements OnInit {
 
     loading: boolean = false;
 
+    statusId = new FormControl('', [Validators.required, Validators.pattern(/^[\w.-]*$/)]);
+
+    getErrorMessage() {
+        return this.statusId.hasError('required') ? this.lang.enterValue :
+            this.statusId.hasError('pattern') ? this.lang.patternId :
+                '';
+    }
 
     constructor(changeDetectorRef: ChangeDetectorRef, media: MediaMatcher, public http: HttpClient, private route: ActivatedRoute, private router: Router, private notify: NotificationService) {
         $j("link[href='merged_css.php']").remove();
diff --git a/apps/maarch_entreprise/js/angular/lang/lang-en.ts b/apps/maarch_entreprise/js/angular/lang/lang-en.ts
index 0084e4d19a3..81f8d25aad5 100755
--- a/apps/maarch_entreprise/js/angular/lang/lang-en.ts
+++ b/apps/maarch_entreprise/js/angular/lang/lang-en.ts
@@ -396,6 +396,9 @@ export const LANG_EN = {
     "signatureDeleted"                  : "Signature deleted",
     "saveNumericPackage"                : "Save numeric package",
     "noNumericPackageSelected"          : "No numeric package selected",
-     "numericPackageImported"           : "Numeric package imported",
+    "numericPackageImported"            : "Numeric package imported",
+    "enterValue"                        : "You must enter a value",
+    "patternId"                         : "Value must contain only alphanumeric, dot, underscore or dash",
+    "alreadyExist"                      : "Identifiant already exists",
 
 };
diff --git a/apps/maarch_entreprise/js/angular/lang/lang-fr.ts b/apps/maarch_entreprise/js/angular/lang/lang-fr.ts
index 213a889ea36..ceb87bff001 100755
--- a/apps/maarch_entreprise/js/angular/lang/lang-fr.ts
+++ b/apps/maarch_entreprise/js/angular/lang/lang-fr.ts
@@ -422,4 +422,7 @@ export const LANG_FR = {
     "saveNumericPackage"                : "Enregistrer un pli numérique",
     "noNumericPackageSelected"          : "Aucun pli numérique séléctionné",
     "numericPackageImported"            : "Pli numérique correctement importé",
+    "enterValue"                        : "Vous devez entrer une valeur",
+    "patternId"                         : "La valeur doit contenir uniquement des alphanumériques, points, underscores ou tirets",
+    "alreadyExist"                      : "L'identifiant existe déjà",
 };
-- 
GitLab