Handle input error in custom input text

4 files changed, 17 insertions, 2 deletions

diff --git a/client/src/app/shared/shared-forms/dynamic-form-field.component.html b/client/src/app/shared/shared-forms/dynamic-form-field.component.html
index 61f9ae8ff..2dd6cf4ad 100644
--- a/client/src/app/shared/shared-forms/dynamic-form-field.component.html
+++ b/client/src/app/shared/shared-forms/dynamic-form-field.component.html
@@ -18,7 +18,7 @@
     </select>
   </div>
 
-  <my-input-text *ngIf="setting.type === 'input-password'" [formControlName]="setting.name" [inputId]="setting.name"></my-input-text>
+  <my-input-text *ngIf="setting.type === 'input-password'" [formError]="formErrors['settings.name']" [formControlName]="setting.name" [inputId]="setting.name"></my-input-text>
 
   <textarea *ngIf="setting.type === 'input-textarea'" type="text" [id]="setting.name" [formControlName]="setting.name"></textarea>
 
@@ -40,7 +40,7 @@
 
   <div *ngIf="setting.type === 'html'" [innerHTML]="setting.html"></div>
 
-  <div *ngIf="setting.type !== 'markdown-text' && setting.type !== 'markdown-enhanced' && formErrors[setting.name]" class="form-error">
+  <div *ngIf="hasDedicatedFormError() && formErrors[setting.name]" class="form-error">
     {{ formErrors[setting.name] }}
   </div>
 
diff --git a/client/src/app/shared/shared-forms/dynamic-form-field.component.ts b/client/src/app/shared/shared-forms/dynamic-form-field.component.ts
index b63890797..e1a1f8034 100644
--- a/client/src/app/shared/shared-forms/dynamic-form-field.component.ts
+++ b/client/src/app/shared/shared-forms/dynamic-form-field.component.ts
@@ -12,4 +12,15 @@ export class DynamicFormFieldComponent {
   @Input() form: FormGroup
   @Input() formErrors: any
   @Input() setting: RegisterClientFormFieldOptions
+
+  hasDedicatedFormError () {
+    const dedicated = new Set<RegisterClientFormFieldOptions['type']>([
+      'input-checkbox',
+      'input',
+      'select',
+      'input-textarea'
+    ])
+
+    return dedicated.has(this.setting.type)
+  }
 }
diff --git a/client/src/app/shared/shared-forms/input-text.component.html b/client/src/app/shared/shared-forms/input-text.component.html
index f890c4f02..abb53a085 100644
--- a/client/src/app/shared/shared-forms/input-text.component.html
+++ b/client/src/app/shared/shared-forms/input-text.component.html
@@ -3,6 +3,7 @@
     [id]="inputId" [autocomplete]="autocomplete" [value]="value" [placeholder]="placeholder" [tabindex]="tabindex"
     [(ngModel)]="value" (ngModelChange)="update()" [readonly]="readonly"
     #input (click)="input.select()" (input)="update()" (change)="update()" [type]="inputType" class="form-control"
+    [ngClass]="{ 'input-error': formError }"
   />
 
   <button *ngIf="withToggle" (click)="toggle()" type="button" class="btn btn-outline-secondary" [title]="toggleTitle">
@@ -18,3 +19,5 @@
     <span class="copy-text">Copy</span>
   </button>
 </div>
+
+<div *ngIf="formError" class="form-error">{{ formError }}</div>
diff --git a/client/src/app/shared/shared-forms/input-text.component.ts b/client/src/app/shared/shared-forms/input-text.component.ts
index ed4637c17..d667ed663 100644
--- a/client/src/app/shared/shared-forms/input-text.component.ts
+++ b/client/src/app/shared/shared-forms/input-text.component.ts
@@ -24,6 +24,7 @@ export class InputTextComponent implements ControlValueAccessor {
   @Input() withCopy = false
   @Input() readonly = false
   @Input() show = false
+  @Input() formError: string
 
   constructor (private notifier: Notifier) { }