style: form wrapper not setting correct error state

Author: AntoineRelief

libs/ui/documentation.json

@@ -1700,7 +1700,7 @@
                     }
                 }
             },
-            "templateData": "<label for=\"{{ name }}\" class=\"inline-flex\">\n  <span class=\"mr-2 flex\">\n    <input\n      [attr.aria-describedby]=\"name + '-description'\"\n      [attr.aria-label]=\"ariaLabel\"\n      id=\"{{ name }}\"\n      name=\"{{ name }}\"\n      type=\"checkbox\"\n      [checked]=\"checked\"\n      [indeterminate]=\"indeterminate\"\n      [ngClass]=\"checkboxClasses\"\n      class=\"form-checkbox h-4 w-4 rounded border-gray-300 self-center\"\n      (click)=\"onSelect()\"\n    />\n  </span>\n  <span class=\"text-sm text-dark-100 font-medium leading-6 flex\">\n    <ng-content select=\"label\"></ng-content>\n    <ng-content select=\"icon\"></ng-content>\n    <p id=\"{{ name }}-description\" class=\"m-0 font-normal text-gray-500\">\n      <ng-content select=\"description\"></ng-content>\n    </p>\n  </span>\n</label>\n"
+            "templateData": "<label for=\"{{ name }}\" class=\"inline-flex\">\n  <span class=\"mr-2 flex\">\n    <input\n      [attr.aria-describedby]=\"name + '-description'\"\n      [attr.aria-label]=\"ariaLabel\"\n      id=\"{{ name }}\"\n      name=\"{{ name }}\"\n      type=\"checkbox\"\n      [checked]=\"checked\"\n      [indeterminate]=\"indeterminate\"\n      [ngClass]=\"checkboxClasses\"\n      class=\"form-checkbox h-4 w-4 rounded border-gray-300 self-center disabled:bg-gray-50\"\n      (click)=\"onSelect()\"\n      [disabled]=\"disabled\"\n    />\n  </span>\n  <span class=\"text-sm text-dark-100 font-medium leading-6 flex\">\n    <ng-content select=\"label\"></ng-content>\n    <ng-content select=\"icon\"></ng-content>\n    <p id=\"{{ name }}-description\" class=\"m-0 font-normal text-gray-500\">\n      <ng-content select=\"description\"></ng-content>\n    </p>\n  </span>\n</label>\n"
         },
         {
             "name": "ChipComponent",
@@ -14469,7 +14469,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "StoryFn<CheckboxComponent>",
-                "defaultValue": "(\n  args: CheckboxComponent\n) => {\n  const formGroup = new FormGroup({\n    checkbox: new FormControl(false),\n  });\n  formGroup.get('checkbox')?.disable();\n  args.variant = 'default';\n  return {\n    component: CheckboxComponent,\n    template: `\n      <form [formGroup]=\"formGroup\">\n      <ui-checkbox [variant]=\"'${args.variant}'\" formControlName=\"checkbox\">\n      <ng-container ngProjectAs=\"label\">Form control checkbox</ng-container>\n      </ui-checkbox>\n        </form>\n        <br>\n        <p>value: {{formGroup.get('checkbox').value}}</p>\n        <p>touched: {{formGroup.get('checkbox').touched}}</p>\n        `,\n    props: {\n      ...args,\n      formGroup,\n    },\n  };\n}",
+                "defaultValue": "(\n  args: CheckboxComponent\n) => {\n  const formGroup = new FormGroup({\n    checkbox: new FormControl(false),\n  });\n  args.variant = 'default';\n  return {\n    component: CheckboxComponent,\n    template: `\n      <form [formGroup]=\"formGroup\">\n      <ui-checkbox [variant]=\"'${args.variant}'\" formControlName=\"checkbox\">\n      <ng-container ngProjectAs=\"label\">Form control checkbox</ng-container>\n      </ui-checkbox>\n        </form>\n        <br>\n        <p>value: {{formGroup.get('checkbox').value}}</p>\n        <p>touched: {{formGroup.get('checkbox').touched}}</p>\n        `,\n    props: {\n      ...args,\n      formGroup,\n    },\n  };\n}",
                 "rawdescription": "Form control template checkbox",
                 "description": "<p>Form control template checkbox</p>\n"
             },
@@ -15744,7 +15744,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "StoryFn<CheckboxComponent>",
-                "defaultValue": "(args: CheckboxComponent) => {\n  args.variant = 'default';\n  return {\n    component: CheckboxComponent,\n    template: `\n      <ui-checkbox [variant]=\"'${args.variant}'\">\n      <ng-container ngProjectAs=\"label\">Checkbox text</ng-container>\n      <ng-container ngProjectAs=\"description\">Description text text text.</ng-container>\n      <ng-container ngProjectAs=\"icon\">\n      <ui-icon\n      icon=\"info_outline\"\n      [inline]=\"true\"\n      [size]=\"18\"\n      variant=\"grey\"\n    ></ui-icon>\n      </ng-container>\n      </ui-checkbox>\n        `,\n    props: {\n      ...args,\n    },\n  };\n}",
+                "defaultValue": "(args: CheckboxComponent) => {\n  args.variant = 'default';\n  return {\n    component: CheckboxComponent,\n    template: `\n      <ui-checkbox [variant]=\"'${args.variant}'\">\n      <ng-container ngProjectAs=\"label\">Checkbox text</ng-container>\n      <ng-container ngProjectAs=\"description\">Description text text text.</ng-container>\n      <ng-container ngProjectAs=\"icon\">\n      <ui-icon\n      icon=\"info_outline\"\n      [size]=\"18\"\n      variant=\"grey\"\n    ></ui-icon>\n      </ng-container>\n      </ui-checkbox>\n        `,\n    props: {\n      ...args,\n    },\n  };\n}",
                 "rawdescription": "Template checkbox",
                 "description": "<p>Template checkbox</p>\n"
             },
@@ -18148,7 +18148,7 @@
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "StoryFn<CheckboxComponent>",
-                    "defaultValue": "(\n  args: CheckboxComponent\n) => {\n  const formGroup = new FormGroup({\n    checkbox: new FormControl(false),\n  });\n  formGroup.get('checkbox')?.disable();\n  args.variant = 'default';\n  return {\n    component: CheckboxComponent,\n    template: `\n      <form [formGroup]=\"formGroup\">\n      <ui-checkbox [variant]=\"'${args.variant}'\" formControlName=\"checkbox\">\n      <ng-container ngProjectAs=\"label\">Form control checkbox</ng-container>\n      </ui-checkbox>\n        </form>\n        <br>\n        <p>value: {{formGroup.get('checkbox').value}}</p>\n        <p>touched: {{formGroup.get('checkbox').touched}}</p>\n        `,\n    props: {\n      ...args,\n      formGroup,\n    },\n  };\n}",
+                    "defaultValue": "(\n  args: CheckboxComponent\n) => {\n  const formGroup = new FormGroup({\n    checkbox: new FormControl(false),\n  });\n  args.variant = 'default';\n  return {\n    component: CheckboxComponent,\n    template: `\n      <form [formGroup]=\"formGroup\">\n      <ui-checkbox [variant]=\"'${args.variant}'\" formControlName=\"checkbox\">\n      <ng-container ngProjectAs=\"label\">Form control checkbox</ng-container>\n      </ui-checkbox>\n        </form>\n        <br>\n        <p>value: {{formGroup.get('checkbox').value}}</p>\n        <p>touched: {{formGroup.get('checkbox').touched}}</p>\n        `,\n    props: {\n      ...args,\n      formGroup,\n    },\n  };\n}",
                     "rawdescription": "Form control template checkbox",
                     "description": "<p>Form control template checkbox</p>\n"
                 },
@@ -18172,7 +18172,7 @@
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "StoryFn<CheckboxComponent>",
-                    "defaultValue": "(args: CheckboxComponent) => {\n  args.variant = 'default';\n  return {\n    component: CheckboxComponent,\n    template: `\n      <ui-checkbox [variant]=\"'${args.variant}'\">\n      <ng-container ngProjectAs=\"label\">Checkbox text</ng-container>\n      <ng-container ngProjectAs=\"description\">Description text text text.</ng-container>\n      <ng-container ngProjectAs=\"icon\">\n      <ui-icon\n      icon=\"info_outline\"\n      [inline]=\"true\"\n      [size]=\"18\"\n      variant=\"grey\"\n    ></ui-icon>\n      </ng-container>\n      </ui-checkbox>\n        `,\n    props: {\n      ...args,\n    },\n  };\n}",
+                    "defaultValue": "(args: CheckboxComponent) => {\n  args.variant = 'default';\n  return {\n    component: CheckboxComponent,\n    template: `\n      <ui-checkbox [variant]=\"'${args.variant}'\">\n      <ng-container ngProjectAs=\"label\">Checkbox text</ng-container>\n      <ng-container ngProjectAs=\"description\">Description text text text.</ng-container>\n      <ng-container ngProjectAs=\"icon\">\n      <ui-icon\n      icon=\"info_outline\"\n      [size]=\"18\"\n      variant=\"grey\"\n    ></ui-icon>\n      </ng-container>\n      </ui-checkbox>\n        `,\n    props: {\n      ...args,\n    },\n  };\n}",
                     "rawdescription": "Template checkbox",
                     "description": "<p>Template checkbox</p>\n"
                 }

libs/ui/src/lib/form-wrapper/form-wrapper.directive.ts

@@ -284,12 +284,10 @@ export class FormWrapperDirective
               this.removeDisableState();
             }
             // Error state
-            if (this.control.control.validator) {
-              if (status === 'INVALID') {
-                this.setInvalidState();
-              } else {
-                this.removeInvalidState();
-              }
+            if (status === 'INVALID') {
+              this.setInvalidState();
+            } else {
+              this.removeInvalidState();
             }
             // Required state
             const isRequired = this.control?.control?.hasValidator(

libs/ui/src/lib/form-wrapper/form-wrapper.stories.ts

@@ -7,6 +7,7 @@ import { SelectMenuModule } from '../select-menu/select-menu.module';
 import { AutocompleteModule } from '../autocomplete/autocomplete.module';
 import { ButtonModule } from '../button/button.module';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { StorybookTranslateModule } from '../../storybook-translate.module';
 
 export default {
   title: 'Components/Form Wrapper',
@@ -22,6 +23,7 @@ export default {
         AutocompleteModule,
         ButtonModule,
         ReactiveFormsModule,
+        StorybookTranslateModule,
       ],
     }),
   ],
@@ -47,18 +49,29 @@ const options = [
 ];
 
 /** Form group to test story with disable option */
-const formControl = new FormGroup({
+const formGroup = new FormGroup({
   name: new FormControl(''),
 });
 /** Callback to test story with disable option */
 const toggleDisabled = () => {
+  const formControl = formGroup.controls.name;
   if (formControl.disabled) {
     formControl.enable();
   } else {
     formControl.disable();
   }
 };
 
+/** Callback to set status of form control to invalid */
+const toggleInvalid = () => {
+  const formControl = formGroup.controls.name;
+  if (formControl.valid) {
+    formControl.setErrors({ customError: true });
+  } else {
+    formControl.setErrors(null);
+  }
+};
+
 /**
  * Template to create form wrapper component's story
  *
@@ -67,14 +80,26 @@ const toggleDisabled = () => {
  */
 const Template: StoryFn<any> = (args: any) => {
   return {
-    template: `<div uiFormFieldDirective [outline]="${args.outline}">
+    template: `
+    <div [formGroup]="formGroup">
+    <div uiFormFieldDirective [outline]="${args.outline}">
     <label>Phone Number</label>
-    <input type="text" name="account-number" id="account-number" placeholder="000-00-0000"/>
+    <input type="text" name="account-number" id="account-number" placeholder="000-00-0000" formControlName="name"/>
     <ui-spinner [size]="'medium'" uiSuffix></ui-spinner>
     <ui-icon icon="search" uiPrefix></ui-icon>
-  </div>`,
+  </div></div>
+  <ui-button (click)="toggleDisabled()">
+  Enable/disabled
+</ui-button>
+<ui-button (click)="toggleInvalid()">
+  Valid/Invalid
+</ui-button>
+  `,
     props: {
       ...args,
+      toggleInvalid,
+      toggleDisabled,
+      formGroup,
     },
   };
 };
@@ -87,9 +112,12 @@ const Template: StoryFn<any> = (args: any) => {
  */
 const TemplateSelect: StoryFn<any> = (args: any) => {
   return {
-    template: `<div uiFormFieldDirective [outline]="${args.outline}">
+    template: `
+    <div [formGroup]="formGroup">
+    <div uiFormFieldDirective [outline]="${args.outline}">
     <label>Choose language</label>
     <ui-select-menu 
+      formControlName="name"
       [multiselect]="false"
       [disabled]="false">
         <ui-select-option *ngFor="let option of options" [value]="option">
@@ -98,10 +126,21 @@ const TemplateSelect: StoryFn<any> = (args: any) => {
     </ui-select-menu>
     <ui-spinner [size]="'medium'" uiSuffix></ui-spinner>
     <ui-icon icon="search" uiPrefix></ui-icon>
-  </div>`,
+  </div>
+    </div>
+    <ui-button (click)="toggleDisabled()">
+    Enable/disabled
+  </ui-button>
+  <ui-button (click)="toggleInvalid()">
+    Valid/Invalid
+  </ui-button>
+  `,
     props: {
       ...args,
       options,
+      toggleInvalid,
+      toggleDisabled,
+      formGroup,
     },
   };
 };
@@ -115,7 +154,7 @@ const TemplateSelect: StoryFn<any> = (args: any) => {
 const TemplateAutocomplete: StoryFn<any> = (args: any) => {
   return {
     template: `
-    <div [formGroup]="formControl">
+    <div [formGroup]="formGroup">
       <div uiFormFieldDirective  [outline]="${args.outline}">
         <label>Choose language</label>
         <input
@@ -143,12 +182,16 @@ const TemplateAutocomplete: StoryFn<any> = (args: any) => {
   <ui-button (click)="toggleDisabled()">
     Enable/disabled
   </ui-button>
+  <ui-button (click)="toggleInvalid()">
+    Valid/Invalid
+  </ui-button>
   `,
     props: {
       ...args,
       options,
       toggleDisabled,
-      formControl,
+      toggleInvalid,
+      formGroup,
     },
   };
 };