Add validation to all input components. close #15

heinerwalter · Sep 18, 2024 · cea8fdb · cea8fdb
1 parent cbad48b
commit cea8fdb
Show file tree

Hide file tree

Showing 20 changed files with 157 additions and 11 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,7 @@
 # See http://help.github.com/ignore-files/ for more about ignoring files.
 
+/.nx
+
 # Compiled output
 /dist
 /tmp

diff --git a/projects/demo/src/app/components/all-inputs-demo/all-inputs-demo.component.html b/projects/demo/src/app/components/all-inputs-demo/all-inputs-demo.component.html
@@ -4,6 +4,7 @@ <h4>Boolean Input</h4>
 <demo-input-demo-wrapper [value]="values.boolean">
   <pe-boolean-input label="Boolean input"
                     infoIconTooltip="Component: <pe-boolean-input>"
+                    helpText="This is an optional help text. You can choose a boolean value here."
                     [(value)]="values.boolean"
                     (valueChange)="onInputValueChange('boolean', $event)">
   </pe-boolean-input>
@@ -13,6 +14,7 @@ <h4>Date Input</h4>
 <demo-input-demo-wrapper [value]="values.date">
   <pe-date-input label="Date input"
                  infoIconTooltip='Component: <pe-date-input type="date">'
+                 helpText="Help texts work with all kinds of inputs but we will not add them to all inputs on this page."
                  type="date"
                  timezone="local"
                  [(value)]="values.date"
@@ -337,3 +339,27 @@ <h4>Groups</h4>
     </pe-select-input>
   </pe-input-group>
 </ng-template>
+
+<h4>Validation</h4>
+<demo-input-demo-wrapper [value]="values.boolean">
+  <pe-boolean-input label="Boolean input with validation"
+                    infoIconTooltip='Component: <pe-boolean-input [isValid]="...">'
+                    helpText="All inputs can be displayed as valid (green) or invalid (red) by assigning a boolean value to [isValid]. In this example only the true option is considered as valid."
+                    [required]="true"
+                    [isValid]="values.boolean"
+                    [(value)]="values.boolean"
+                    (valueChange)="onInputValueChange('boolean', $event)">
+  </pe-boolean-input>
+</demo-input-demo-wrapper>
+
+<demo-input-demo-wrapper [value]="values.text">
+  <pe-text-input label="Text input with validation"
+                 infoIconTooltip='Component: <pe-text-input [isValid]="...">'
+                 [(value)]="values.text"
+                 [required]="true"
+                 [isValid]="!!values.text"
+                 validFeedback="In addition to the validity style of the input element, feedback texts for valid and invalid states can be added like the help text. This is the valid feedback. Clear the input to show the invalid feedback."
+                 invalidFeedback="In addition to the validity style of the input element, feedback texts for valid and invalid states can be added like the help text. This is the invalid feedback. Enter something to show the valid feedback."
+                 (valueChange)="onInputValueChange('text', $event)">
+  </pe-text-input>
+</demo-input-demo-wrapper>
diff --git a/...property-editor/src/lib/components/input/array-form-group/array-form-group.component.html b/...property-editor/src/lib/components/input/array-form-group/array-form-group.component.html
@@ -3,6 +3,9 @@
                [inlineLabel]="inlineLabel"
                [infoIconTooltip]="infoIconTooltip"
                [helpText]="helpText"
+               [validFeedback]="validFeedback"
+               [invalidFeedback]="invalidFeedback"
+               [validityFeedbackAsTooltip]="validityFeedbackAsTooltip"
                [noFormGroup]="noFormGroup">
   <div class="array-form-group-container">
 

diff --git a/...s/ngx-property-editor/src/lib/components/input/boolean-input/boolean-input.component.html b/...s/ngx-property-editor/src/lib/components/input/boolean-input/boolean-input.component.html
@@ -3,6 +3,8 @@
   <div class="form-check"
        [class.form-switch]="type == 'switch'">
     <input class="form-check-input"
+           [class.is-valid]="isValid == true"
+           [class.is-invalid]="isValid == false"
            type="checkbox"
            [attr.role]="type == 'switch' ? 'switch' : 'checkbox'"
            [id]="id || label"
@@ -29,6 +31,10 @@
                   [inlineLabel]="inlineLabel"
                   [infoIconTooltip]="infoIconTooltip"
                   [helpText]="helpText"
+                  [isValid]="isValid"
+                  [validFeedback]="validFeedback"
+                  [invalidFeedback]="invalidFeedback"
+                  [validityFeedbackAsTooltip]="validityFeedbackAsTooltip"
                   [noFormGroup]="noFormGroup"
                   [id]="id"
                   [name]="name"

diff --git a/...ditor/src/lib/components/input/checkbox-select-input/checkbox-select-input.component.html b/...ditor/src/lib/components/input/checkbox-select-input/checkbox-select-input.component.html
@@ -7,7 +7,10 @@
                [label]="label"
                [inlineLabel]="inlineLabel"
                [infoIconTooltip]="infoIconTooltip"
-               [helpText]="helpText">
+               [helpText]="helpText"
+               [validFeedback]="validFeedback"
+               [invalidFeedback]="invalidFeedback"
+               [validityFeedbackAsTooltip]="validityFeedbackAsTooltip">
   <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
 </pe-form-group>
 
@@ -16,6 +19,7 @@
     <pe-boolean-input [noFormGroup]="true"
                       [id]="id + i"
                       type="checkbox"
+                      [isValid]="isValid"
                       [label]="evaluateDisplayPropertyName(item)"
                       [value]="value?.includes(evaluateValuePropertyName(item))"
                       (valueChange)="onItemValueChanged(item, $event)">
@@ -26,6 +30,7 @@
                     [noFormGroup]="true"
                     [id]="id + '-select-all'"
                     type="checkbox"
+                    [isValid]="isValid"
                     [label]="'Alle auswählen'"
                     [allowIndeterminate]="true"
                     [value]="value?.length == 0 ? false : value?.length == dataSource.length ? true : undefined"

diff --git a/projects/ngx-property-editor/src/lib/components/input/date-input/date-input.component.html b/projects/ngx-property-editor/src/lib/components/input/date-input/date-input.component.html
@@ -7,12 +7,17 @@
                [label]="label"
                [inlineLabel]="inlineLabel"
                [infoIconTooltip]="infoIconTooltip"
-               [helpText]="helpText">
+               [helpText]="helpText"
+               [validFeedback]="validFeedback"
+               [invalidFeedback]="invalidFeedback"
+               [validityFeedbackAsTooltip]="validityFeedbackAsTooltip">
   <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
 </pe-form-group>
 
 <ng-template #contentTemplate>
   <input class="form-control"
+         [class.is-valid]="isValid == true"
+         [class.is-invalid]="isValid == false"
          [type]="type || 'date'"
          [id]="id"
          [name]="name || id"

diff --git a/...ngx-property-editor/src/lib/components/input/dropdown-input/dropdown-input.component.html b/...ngx-property-editor/src/lib/components/input/dropdown-input/dropdown-input.component.html
@@ -7,7 +7,10 @@
                [label]="label"
                [inlineLabel]="inlineLabel"
                [infoIconTooltip]="infoIconTooltip"
-               [helpText]="helpText">
+               [helpText]="helpText"
+               [validFeedback]="validFeedback"
+               [invalidFeedback]="invalidFeedback"
+               [validityFeedbackAsTooltip]="validityFeedbackAsTooltip">
   <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
 </pe-form-group>
 

diff --git a/projects/ngx-property-editor/src/lib/components/input/file-input/file-input.component.html b/projects/ngx-property-editor/src/lib/components/input/file-input/file-input.component.html
@@ -7,12 +7,17 @@
                [label]="label"
                [inlineLabel]="inlineLabel"
                [infoIconTooltip]="infoIconTooltip"
-               [helpText]="helpText">
+               [helpText]="helpText"
+               [validFeedback]="validFeedback"
+               [invalidFeedback]="invalidFeedback"
+               [validityFeedbackAsTooltip]="validityFeedbackAsTooltip">
   <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
 </pe-form-group>
 
 <ng-template #contentTemplate>
   <input class="form-control"
+         [class.is-valid]="isValid == true"
+         [class.is-invalid]="isValid == false"
          type="file"
          [id]="id"
          [name]="name || id"

diff --git a/projects/ngx-property-editor/src/lib/components/input/form-group/form-group.component.html b/projects/ngx-property-editor/src/lib/components/input/form-group/form-group.component.html
@@ -14,6 +14,14 @@
   </label>
   <div class="form-group-content">
     <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
+    <div *ngIf="validFeedback"
+         [class]="'valid-' + (validityFeedbackAsTooltip ? 'tooltip' : 'feedback')">
+      {{validFeedback}}
+    </div>
+    <div *ngIf="invalidFeedback"
+         [class]="'invalid-' + (validityFeedbackAsTooltip ? 'tooltip' : 'feedback')">
+      {{invalidFeedback}}
+    </div>
   </div>
   <pe-form-text *ngIf="helpText" [id]="for ? for + '-help' : ''">{{helpText}}</pe-form-text>
 </div>

diff --git a/projects/ngx-property-editor/src/lib/components/input/form-group/form-group.component.ts b/projects/ngx-property-editor/src/lib/components/input/form-group/form-group.component.ts
@@ -36,6 +36,23 @@ export class FormGroupComponent {
    */
   @Input() public helpText: string | undefined = undefined;
 
+  /**
+   * If not empty, this text is displayed below the input element (like the `helpText`)
+   * when the entered value is marked as valid (`isValid == true`).
+   */
+  @Input() public validFeedback: string | undefined = undefined;
+  /**
+   * If not empty, this text is displayed below the input element (like the `helpText`)
+   * when the entered value is marked as invalid (`isValid == false`).
+   */
+  @Input() public invalidFeedback: string | undefined = undefined;
+  /**
+   * If false (default), the validity feedback texts (`validFeedback` and `invalidFeedback`)
+   * are displayed as block element below the content (input element) like the `helpText`.
+   * If true, the validity feedback texts are displayed as tooltip (not recommended!).
+   */
+  @Input() public validityFeedbackAsTooltip: boolean = false;
+
   /** If true, the input element is not wrapped inside a FormGroup component. */
   @Input() public noFormGroup: boolean = false;
 

diff --git a/projects/ngx-property-editor/src/lib/components/input/input-base.ts b/projects/ngx-property-editor/src/lib/components/input/input-base.ts
@@ -44,6 +44,33 @@ export class InputBase {
   /** If true, an empty value is not valid. */
   @Input() public required: boolean = false;
 
+  /**
+   * Apply bootstrap validation style to the input element.
+   * If `true`, the input element is styled with green border.
+   * If `false`, the input element is styled with red border.
+   * If `undefined`, validation is not applied to the input element (default style).
+   */
+  @Input() public isValid: boolean | undefined = undefined;
+  /**
+   * Only if a form group component is added (`noFormGroup == false`):
+   * If not empty, this text is displayed below the input element (like the `helpText`)
+   * when the entered value is marked as valid (`isValid == true`).
+   */
+  @Input() public validFeedback: string | undefined = undefined;
+  /**
+   * Only if a form group component is added (`noFormGroup == false`):
+   * If not empty, this text is displayed below the input element (like the `helpText`)
+   * when the entered value is marked as invalid (`isValid == false`).
+   */
+  @Input() public invalidFeedback: string | undefined = undefined;
+  /**
+   * Only if a form group component is added (`noFormGroup == false`):
+   * If false (default), the validity feedback texts (`validFeedback` and `invalidFeedback`)
+   * are displayed as block element below the content (input element) like the `helpText`.
+   * If true, the validity feedback texts are displayed as tooltip (not recommended!).
+   */
+  @Input() public validityFeedbackAsTooltip: boolean = false;
+
   /** If true, the input element is not wrapped inside a form group component. */
   @Input() public noFormGroup: boolean = false;
 

diff --git a/...cts/ngx-property-editor/src/lib/components/input/number-input/number-input.component.html b/...cts/ngx-property-editor/src/lib/components/input/number-input/number-input.component.html
@@ -7,12 +7,17 @@
                [label]="label"
                [inlineLabel]="inlineLabel"
                [infoIconTooltip]="infoIconTooltip"
-               [helpText]="helpText">
+               [helpText]="helpText"
+               [validFeedback]="validFeedback"
+               [invalidFeedback]="invalidFeedback"
+               [validityFeedbackAsTooltip]="validityFeedbackAsTooltip">
   <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
 </pe-form-group>
 
 <ng-template #contentTemplate>
   <input class="form-control"
+         [class.is-valid]="isValid == true"
+         [class.is-invalid]="isValid == false"
          type="number"
          [id]="id"
          [name]="name || id"

diff --git a/projects/ngx-property-editor/src/lib/components/input/radio-input/radio-input.component.html b/projects/ngx-property-editor/src/lib/components/input/radio-input/radio-input.component.html
@@ -7,7 +7,10 @@
                [label]="label"
                [inlineLabel]="inlineLabel"
                [infoIconTooltip]="infoIconTooltip"
-               [helpText]="helpText">
+               [helpText]="helpText"
+               [validFeedback]="validFeedback"
+               [invalidFeedback]="invalidFeedback"
+               [validityFeedbackAsTooltip]="validityFeedbackAsTooltip">
   <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
 </pe-form-group>
 
@@ -18,6 +21,7 @@
                            [name]="name || id"
                            [disabled]="disabled"
                            [readonly]="readonly"
+                           [isValid]="isValid"
                            [inline]="inline"
                            [option]="evaluateValuePropertyName(item)"
                            [(value)]="value"

diff --git a/...cts/ngx-property-editor/src/lib/components/input/rating-input/rating-input.component.html b/...cts/ngx-property-editor/src/lib/components/input/rating-input/rating-input.component.html
@@ -3,6 +3,9 @@
                [inlineLabel]="inlineLabel"
                [infoIconTooltip]="infoIconTooltip"
                [helpText]="helpText"
+               [validFeedback]="validFeedback"
+               [invalidFeedback]="invalidFeedback"
+               [validityFeedbackAsTooltip]="validityFeedbackAsTooltip"
                [noFormGroup]="noFormGroup">
   <ngb-rating [id]="id"
               [readonly]="readonly"

diff --git a/...cts/ngx-property-editor/src/lib/components/input/select-input/select-input.component.html b/...cts/ngx-property-editor/src/lib/components/input/select-input/select-input.component.html
@@ -7,12 +7,17 @@
                [label]="label"
                [inlineLabel]="inlineLabel"
                [infoIconTooltip]="infoIconTooltip"
-               [helpText]="helpText">
+               [helpText]="helpText"
+               [validFeedback]="validFeedback"
+               [invalidFeedback]="invalidFeedback"
+               [validityFeedbackAsTooltip]="validityFeedbackAsTooltip">
   <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
 </pe-form-group>
 
 <ng-template #contentTemplate>
   <select class="form-select"
+          [class.is-valid]="isValid == true"
+          [class.is-invalid]="isValid == false"
           [class]="selectClass || ''"
           [class.readonly]="readonly"
           [id]="id"

diff --git a/...erty-editor/src/lib/components/input/single-radio-input/single-radio-input.component.html b/...erty-editor/src/lib/components/input/single-radio-input/single-radio-input.component.html
@@ -1,6 +1,8 @@
 <div class="form-check"
      [class.form-check-inline]="inline">
   <input class="form-check-input" type="radio"
+         [class.is-valid]="isValid == true"
+         [class.is-invalid]="isValid == false"
          [id]="id"
          [name]="name || id"
          [disabled]="disabled"

diff --git a/...c/lib/components/input/special-input/color-select-input/color-select-input.component.html b/...c/lib/components/input/special-input/color-select-input/color-select-input.component.html
@@ -8,6 +8,10 @@
                  [disabled]="disabled"
                  [readonly]="readonly"
                  [required]="required"
+                 [isValid]="isValid"
+                 [validFeedback]="validFeedback"
+                 [invalidFeedback]="invalidFeedback"
+                 [validityFeedbackAsTooltip]="validityFeedbackAsTooltip"
                  [noFormGroup]="noFormGroup"
                  [flexGrow]="flexGrow"
 

diff --git a/...src/lib/components/input/special-input/icon-select-input/icon-select-input.component.html b/...src/lib/components/input/special-input/icon-select-input/icon-select-input.component.html
@@ -7,7 +7,10 @@
                [label]="label"
                [inlineLabel]="inlineLabel"
                [infoIconTooltip]="infoIconTooltip"
-               [helpText]="helpText">
+               [helpText]="helpText"
+               [validFeedback]="validFeedback"
+               [invalidFeedback]="invalidFeedback"
+               [validityFeedbackAsTooltip]="validityFeedbackAsTooltip">
   <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
 </pe-form-group>
 
@@ -21,7 +24,10 @@
                    [disabled]="disabled"
                    [readonly]="readonly"
                    [required]="required"
-                   [noFormGroup]="noFormGroup"
+                   [isValid]="isValid"
+                   [validFeedback]="validFeedback"
+                   [invalidFeedback]="invalidFeedback"
+                   [validityFeedbackAsTooltip]="validityFeedbackAsTooltip"
                    [flexGrow]="flexGrow"
 
                    [(value)]="value"

diff --git a/...x-property-editor/src/lib/components/input/text-area-input/text-area-input.component.html b/...x-property-editor/src/lib/components/input/text-area-input/text-area-input.component.html
@@ -7,12 +7,17 @@
                [label]="label"
                [inlineLabel]="inlineLabel"
                [infoIconTooltip]="infoIconTooltip"
-               [helpText]="helpText">
+               [helpText]="helpText"
+               [validFeedback]="validFeedback"
+               [invalidFeedback]="invalidFeedback"
+               [validityFeedbackAsTooltip]="validityFeedbackAsTooltip">
   <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
 </pe-form-group>
 
 <ng-template #contentTemplate>
   <textarea class="form-control"
+            [class.is-valid]="isValid == true"
+            [class.is-invalid]="isValid == false"
             [id]="id"
             [name]="name || id"
             [placeholder]="placeholder || ''"

diff --git a/projects/ngx-property-editor/src/lib/components/input/text-input/text-input.component.html b/projects/ngx-property-editor/src/lib/components/input/text-input/text-input.component.html
@@ -7,12 +7,17 @@
                [label]="label"
                [inlineLabel]="inlineLabel"
                [infoIconTooltip]="infoIconTooltip"
-               [helpText]="helpText">
+               [helpText]="helpText"
+               [validFeedback]="validFeedback"
+               [invalidFeedback]="invalidFeedback"
+               [validityFeedbackAsTooltip]="validityFeedbackAsTooltip">
   <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
 </pe-form-group>
 
 <ng-template #contentTemplate>
   <input class="form-control"
+         [class.is-valid]="isValid == true"
+         [class.is-invalid]="isValid == false"
          [type]="type || 'text'"
          [id]="id"
          [name]="name || id"