feat(field): allow displaying error message without user interaction

ref: DTRSD-123286

Signed-off-by: Jacques Larique <[email protected]>

Author: JacquesLarique

packages/components/field/README.md

@@ -31,10 +31,11 @@ angular.module('myModule', ['oui.field'])
 
 ## Component `oui-field`
 
-| Attribute         | Type      | Binding   | One-time binding  | Values                            | Default   | Description
-| ----              | ----      | ----      | ----              | ----                              | ----      | ----
-| `label`           | string    | @?        | no                | n/a                               | n/a       | field label
-| `label-popover`   | string    | @?        | no                | n/a                               | n/a       | text to describe the field or give more information
-| `help-text`       | string    | @?        | no                | n/a                               | n/a       | text to help fill the form field
-| `size`            | string    | @?        | yes               | `xs`, `s`, `m`, `l`, `xl`, `auto` | `auto`    | field size
-| `error-messages`  | object    | <?        | no                | n/a                               | n/a       | dictionary to override default messages
+| Attribute             | Type    | Binding   | One-time binding  | Values                            | Default   | Description
+|-----------------------|---------| ----      | ----              |-----------------------------------| ----      | ----
+| `label`               | string  | @?        | no                | n/a                               | n/a       | field label
+| `label-popover`       | string  | @?        | no                | n/a                               | n/a       | text to describe the field or give more information
+| `help-text`           | string  | @?        | no                | n/a                               | n/a       | text to help fill the form field
+| `size`                | string  | @?        | yes               | `xs`, `s`, `m`, `l`, `xl`, `auto` | `auto`    | field size
+| `force-error-display` | boolean | <?        | no                | true / false                      | n/a       | allow to display error messages even if the field is not blurred nor form submitted
+| `error-messages`      | object  | <?        | no                | n/a                               | n/a       | dictionary to override default messages

packages/components/field/src/js/field.component.js

@@ -8,6 +8,7 @@ export default {
     size: '@?',
     errorMessages: '<?',
     labelPopover: '@?',
+    forceErrorDisplay: '<?',
   },
   controller,
   require: {

packages/components/field/src/js/field.controller.js

@@ -148,7 +148,7 @@ export default class FieldController {
     }
 
     this.checkAllErrors();
-    return this.invalid && (this.blurred || this.form.$submitted);
+    return this.invalid && (this.forceErrorDisplay || this.blurred || this.form.$submitted);
   }
 
   checkAllErrors() {

packages/components/field/src/js/field.spec.js

@@ -739,6 +739,29 @@ describe('ouiField', () => {
         $timeout.flush();
         expect(element[0].querySelector('.oui-field__error')).not.toBeNull();
       });
+
+      it('should show error without user interaction', () => {
+        const element = TestUtils.compileTemplate(`
+                    <form name="form" ng-submit="$ctrl.noop()">
+                        <oui-field label="{{'username'}}" force-error-display="true">
+                            <input type="text"
+                                class="oui-input"
+                                type="text"
+                                id="username"
+                                name="username"
+                                required
+                                ng-model="$ctrl.username">
+                        </oui-field>
+                        <button type="submit">Ok</button>
+                    </form>
+                `, {
+          noop,
+        });
+        $timeout.flush();
+
+        // Initial state
+        expect(element[0].querySelector('.oui-field__error')).not.toBeNull();
+      });
     });
   });
 });