FDS-658 object validation

packages/flow-core/src/components/f-form-group/f-form-group.ts

@@ -1,4 +1,4 @@
-import { html, unsafeCSS } from "lit";
+import { html, nothing, unsafeCSS } from "lit";
 import { property } from "lit/decorators.js";
 import { FRoot } from "../../mixins/components/f-root/f-root";
 import { FDiv } from "../f-div/f-div";
@@ -8,6 +8,7 @@ import globalStyle from "./f-form-group-global.scss?inline";
 import { flowElement } from "./../../utils";
 
 import { injectCss } from "@ollion/flow-core-config";
+import { ifDefined } from "lit-html/directives/if-defined.js";
 injectCss("f-form-group", globalStyle);
 
 export type FGroupLabel = {
@@ -131,7 +132,7 @@ export class FFormGroup extends FRoot {
 											variant="heading"
 											size="small"
 											weight="regular"
-											data-qa-label-for=${this.dataset["qaId"]}
+											data-qa-label-for=${ifDefined(this.dataset["qaId"])}
 											.state=${this.collapse === "text" ? "primary" : "default"}
 										>
 											${this.collapse === "text"
@@ -153,19 +154,19 @@ export class FFormGroup extends FRoot {
 												source="i-question-filled"
 												size="small"
 												state="default"
-												data-qa-info-icon-for=${this.dataset["qaId"]}
+												data-qa-info-icon-for=${ifDefined(this.dataset["qaId"])}
 												.tooltip="${this.label?.iconTooltip}"
 												clickable
 										  ></f-icon>`
-										: ""}
+										: nothing}
 								</f-div>
 								${this.label?.description
 									? html` <f-div height="hug-content" width="hug-content">
 											<f-text variant="para" size="small" weight="regular">
 												${this.label.description}
 											</f-text>
 									  </f-div>`
-									: ""}
+									: nothing}
 							</f-div>
 							<f-div
 								direction="row"
@@ -182,19 +183,19 @@ export class FFormGroup extends FRoot {
 											clickable
 											@click=${this.duplicationClick}
 									  ></f-icon>`
-									: ""}
+									: nothing}
 								${this.collapse === "accordion"
 									? html` <f-icon
 											.source=${!this.isCollapsed ? "i-chevron-up" : "i-chevron-down"}
 											size="small"
 											state="default"
 											clickable
 									  ></f-icon>`
-									: ""}
+									: nothing}
 							</f-div>
 						</f-div>
 				  `
-				: ""}
+				: nothing}
 			${!this.isCollapsed || this.collapse === "none"
 				? html`
 						<f-div gap="small">
@@ -210,7 +211,7 @@ export class FFormGroup extends FRoot {
 							<slot name="action"></slot>
 						</f-div>
 				  `
-				: ""}
+				: nothing}
 		</f-div>`;
 	}
 }

packages/flow-form-builder/src/components/f-form-array/f-form-array-global.scss

@@ -0,0 +1,5 @@
+f-form-array {
+	> [slot="help"] {
+		display: contents;
+	}
+}

packages/flow-form-builder/src/components/f-form-array/f-form-array.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { html, PropertyValueMap, unsafeCSS } from "lit";
 import { customElement, property, queryAll } from "lit/decorators.js";
-import { FDiv, FRoot } from "@ollion/flow-core";
+import { FDiv, FRoot, injectCss } from "@ollion/flow-core";
 import eleStyle from "./f-form-array.scss?inline";
 import {
 	CanValidateFields,
@@ -20,7 +20,9 @@ import { getEssentialFlowCoreStyles, propogateProperties } from "../../modules/h
 import { FFormObject } from "../f-form-object/f-form-object";
 import { FIconButton } from "@ollion/flow-core";
 import { ifDefined } from "lit/directives/if-defined.js";
+import globalStyle from "./f-form-array-global.scss?inline";
 
+injectCss("f-form-array", globalStyle);
 export type ArrayValueType = (
 	| string
 	| string[]
@@ -36,7 +38,7 @@ export class FFormArray extends FRoot {
 	/**
 	 * css loaded from scss file
 	 */
-	static styles = [unsafeCSS(eleStyle), ...getEssentialFlowCoreStyles()];
+	static styles = [unsafeCSS(eleStyle), unsafeCSS(globalStyle), ...getEssentialFlowCoreStyles()];
 
 	/**
 	 * @attribute comments baout title
@@ -217,6 +219,7 @@ export class FFormArray extends FRoot {
 		this.fieldRefs.forEach(fieldRef => {
 			if ((fieldConfig.type === "object" || fieldConfig.type === "array") && fieldRef.value) {
 				allValidations.push(fieldRef.value.validate(silent));
+				allValidations.push(validateField(fieldConfig, fieldRef.value, silent));
 			} else {
 				allValidations.push(
 					validateField(

packages/flow-form-builder/src/components/f-form-builder/f-form-builder.ts

@@ -28,6 +28,7 @@ import { getEssentialFlowCoreStyles, propogateProperties } from "../../modules/h
 import { cloneDeep, isEqual } from "lodash-es";
 import { injectCss } from "@ollion/flow-core-config";
 import { ifDefined } from "lit/directives/if-defined.js";
+import formArrayGlobalStyles from "./../f-form-array/f-form-array-global.scss?inline";
 
 injectCss("f-form-builder", globalStyle);
 
@@ -36,7 +37,12 @@ export class FFormBuilder extends FRoot {
 	/**
 	 * css loaded from scss file
 	 */
-	static styles = [unsafeCSS(eleStyle), unsafeCSS(globalStyle), ...getEssentialFlowCoreStyles()];
+	static styles = [
+		unsafeCSS(eleStyle),
+		unsafeCSS(formArrayGlobalStyles),
+		unsafeCSS(globalStyle),
+		...getEssentialFlowCoreStyles()
+	];
 
 	/**
 	 * @attribute formbuilder name
@@ -352,6 +358,9 @@ export class FFormBuilder extends FRoot {
 			this.fieldRef.value
 		) {
 			allValidations.push(this.fieldRef.value.validate(silent));
+			allValidations.push(
+				validateField(this.field as CanValidateFields, this.fieldRef.value, silent)
+			);
 		} else if (this.field) {
 			allValidations.push(
 				validateField(

packages/flow-form-builder/src/components/f-form-object/f-form-object-global.scss

@@ -45,3 +45,9 @@ f-form-group[direction="horizontal"] {
 		flex: 1 1 auto !important;
 	}
 }
+
+f-form-object {
+	> [slot="help"] {
+		display: contents;
+	}
+}

packages/flow-form-builder/src/components/f-form-object/f-form-object.ts

@@ -1,4 +1,4 @@
-import { html, PropertyValueMap, TemplateResult, unsafeCSS } from "lit";
+import { html, nothing, PropertyValueMap, TemplateResult, unsafeCSS } from "lit";
 import { customElement, property, query } from "lit/decorators.js";
 import { FDiv, FRoot } from "@ollion/flow-core";
 import eleStyle from "./f-form-object.scss?inline";
@@ -148,7 +148,8 @@ export class FFormObject extends FRoot {
 						.state=${this.config.state}
 						>${this.config?.helperText}</f-text
 				  >`
-				: ""}
+				: nothing}
+			<slot name="help"></slot>
 		</f-div>`;
 	}
 
@@ -163,6 +164,7 @@ export class FFormObject extends FRoot {
 				allValidations.push(
 					(this.fieldRefs[fieldname].value as FFormInputElements).validate(silent)
 				);
+				allValidations.push(validateField(fieldConfig, this.fieldRefs[fieldname].value, silent));
 			} else {
 				if (this.fieldRefs[fieldname]) {
 					allValidations.push(

packages/flow-form-builder/src/modules/helpers.ts

@@ -34,6 +34,7 @@ import checkboxGroupGlobalStyles from "./../components/f-checkbox-group/f-checkb
 import radioGroupGlobalStyles from "./../components/f-radio-group/f-radio-group-global.scss?inline";
 import fieldSeparatorGlobalStyles from "./../components/f-field-separator/f-field-separator-global.scss?inline";
 import formObjectGlobalStyles from "./../components/f-form-object/f-form-object-global.scss?inline";
+
 import { ifDefined } from "lit/directives/if-defined.js";
 
 export async function propogateProperties(element: FFormArray | FFormObject | FFormBuilder) {

packages/flow-form-builder/src/modules/validation/validator.ts

@@ -207,16 +207,11 @@ function updateMessage(
 	const helpSlot = element.querySelector<HTMLSlotElement>("[slot='help']");
 	if (helpSlot) {
 		helpSlot.remove();
-		element.insertAdjacentHTML(
-			"beforeend",
-			`<f-div slot="help" ${qaAttribute}=${field.qaId || field.id || ""}>${message}</f-div>`
-		);
-	} else {
-		element.insertAdjacentHTML(
-			"beforeend",
-			`<f-div slot="help" ${qaAttribute}=${field.qaId || field.id || ""}>${message}</f-div>`
-		);
 	}
+	element.insertAdjacentHTML(
+		"beforeend",
+		`<f-div slot="help" ${qaAttribute}=${field.qaId || field.id || ""}>${message}</f-div>`
+	);
 }
 
 export function extractValidationState(allResults: ValidationResults) {

stories/flow-core/f-search.stories.ts

@@ -30,7 +30,7 @@ export const Playground = {
 					.variant=${args.variant}
 					.category=${args.category}
 					.placeholder=${args.placeholder}
-					.result=${[]}
+					.result=${args.result}
 					.scope=${args.scope}
 					@input=${handleInput}
 					.state=${args.state}

stories/flow-form-builder/array-field.stories.ts

@@ -25,7 +25,17 @@ const sampleFormBuilder: SampleFormBuilder = {
 		},
 		field: {
 			type: "text"
-		}
+		},
+		validationRules: [
+			{
+				name: "custom",
+				message: "Array values are invalid",
+				validate: values => {
+					console.log(values);
+					return false;
+				}
+			}
+		]
 	}
 };
 

stories/flow-form-builder/f-form-builder.stories.js

@@ -51,40 +51,18 @@ export const Playground = {
 			event.stopImmediatePropagation();
 		};
 
-		return html` <f-div padding="medium" gap="medium" height="100%" overflow="scroll">
-			<f-div>
-				<f-form-builder
-					${ref(formRef)}
-					.field=${args.field}
-					.values=${args.values}
-					.variant=${args.variant}
-					.category=${args.category}
-					.size=${args.size}
-					.gap=${args.gap}
-					.label=${{
-						title: "Form label",
-						description: "Description about form",
-						iconTooltip: "Form more info"
-					}}
-					@submit=${handleSubmit}
-					@input=${handleInput}
-					@keydown=${handleKeydown}
-					@state-change=${handleStateChange}
-				>
-					<f-div>
-						<f-button label="submit" type="submit"></f-button>
-					</f-div>
-				</f-form-builder>
-			</f-div>
-			<f-divider></f-divider>
-			<f-div width="400px" height="hug-content" direction="column" gap="small" overflow="scroll">
-				<f-text>Values</f-text>
-				<pre ${ref(fieldRef)}>${JSON.stringify(args.values, undefined, 8)}</pre>
-				<f-divider></f-divider>
-				<f-text size="large" weight="bold" state="secondary">Form State with silent errors</f-text>
-				<pre ${ref(stateRef)}></pre>
-			</f-div>
-		</f-div>`;
+		return html`<f-div direction="column">
+			<f-div padding="medium" direction="row" height="hug-content" gap="medium" overflow="scroll">
+				<f-div width="hug-content" align="middle-center">
+					<f-text variant="para" size="medium" weight="regular" state="default" align="left"
+						>Target environment</f-text
+					>
+				</f-div>
+				<f-div align="middle-center" width="224px">
+					<f-select .options=${["test1", "test2", "test3"]} placeholder="Select Target Environment">
+					</f-select>
+				</f-div> </f-div
+		></f-div>`;
 	},
 
 	name: "Playground",

stories/flow-form-builder/object-field.stories.ts

@@ -22,24 +22,30 @@ const sampleFormBuilder: SampleFormBuilder = {
 		direction: "horizontal",
 		isCollapsible: false,
 		isCollapsed: true,
+		helperText: "This is helper text for object",
 		label: {
 			title: "Object field form",
 			description: "showing object field",
 			iconTooltip: "Simple object with 2 fields `firstname` & `lastname` "
 		},
 		fields: {
 			firstname: {
-				type: "text",
-				validationRules: [
-					{
-						name: "required"
-					}
-				]
+				type: "text"
 			},
 			lastname: {
 				type: "text"
 			}
-		}
+		},
+		validationRules: [
+			{
+				name: "custom",
+				message: "Object values are invalid",
+				validate: values => {
+					console.log(values);
+					return false;
+				}
+			}
+		]
 	}
 };
 
@@ -54,13 +60,17 @@ const Template: Story<unknown> = (args: any) => {
 			fieldRef.value.innerHTML = JSON.stringify(event.detail, undefined, 8);
 		}
 	};
+	const handleSubmit = (event: CustomEvent) => {
+		console.log(event.detail);
+	};
 	return html`
 		<f-div padding="medium" gap="large">
 			<f-form-builder
 				.field=${args.field}
 				.values=${args.values}
 				@keydown=${handleKeydown}
 				@input=${handleInput}
+				@submit=${handleSubmit}
 			>
 				<f-div>
 					<f-button label="submit" type="submit"></f-button>