Fix issue form control validation

packages/core/src/components/fields.tsx

@@ -1,22 +1,22 @@
 import React, { useLayoutEffect } from "react";
-import clsx from 'clsx';
+import clsx from "clsx";
 
 import {
-  AbstractControl,
-  FormControl,
-  FormGroup,
-  FormArray,
-  Form
+    AbstractControl,
+    FormControl,
+    FormGroup,
+    FormArray,
+    Form,
 } from "../models/forms";
 import {
-  StaticElement,
-  InputElement,
-  InputBase,
-  InputGroup,
-  InputArray,
+    StaticElement,
+    InputElement,
+    InputBase,
+    InputGroup,
+    InputArray,
 } from "../models/inputs";
-import { ErrorTranslators } from '../models/errors';
-import { useForceUpdate } from '../hooks/force-update';
+import { ErrorTranslators } from "../models/errors";
+import { useForceUpdate } from "../hooks/force-update";
 
 const inputHasControl = (input: InputElement): boolean => {
     // NOTE: static elements are skipped, since they are just
@@ -48,7 +48,7 @@ export const Field = (props: FieldProps): JSX.Element | null => {
             return;
         }
 
-        const opts = { emitEvent: false };
+        const opts = { emitEvent: false, form };
         if (isHidden) {
             control?.disable(opts);
         } else {
@@ -94,12 +94,7 @@ export const Field = (props: FieldProps): JSX.Element | null => {
             />
         );
     } else if (input instanceof StaticElement) {
-        return (
-            <StaticComponent
-                form={form}
-                input={input}
-            />
-        );
+        return <StaticComponent form={form} input={input} />;
     }
 
     // unknown case
@@ -148,7 +143,9 @@ export const FieldGroup = <V,>(
     return (
         <C control={props.control} input={props.input}>
             {props.input?.inputs?.map((inp) => {
-                const ctrl = inp?.name ? props.control?.get(inp.name) : undefined;
+                const ctrl = inp?.name
+                    ? props.control?.get(inp.name)
+                    : undefined;
                 return (
                     <Field
                         key={inp?.name}
@@ -210,7 +207,6 @@ interface StaticComponentProps {
 export const StaticComponent = (
     props: StaticComponentProps
 ): JSX.Element | null => {
-
     const C = props.input?.component;
     if (!C) {
         return null;

packages/core/src/models/controls.ts

@@ -1,51 +1,58 @@
-import { Errors } from './errors';
+import { Errors } from "./errors";
 
 export type Status = "VALID" | "INVALID" | "DISABLED" | "PENDING";
 
 export interface SelfOnlyOpts {
-  onlySelf?: boolean;
+    onlySelf?: boolean;
 }
 
 export interface EmitEventOpts {
-  emitEvent?: boolean;
+    emitEvent?: boolean;
 }
 
-export interface ControlChangeOpts extends SelfOnlyOpts, EmitEventOpts {}
+export interface FormEventOpts {
+    form?: any;
+}
+
+export interface ControlChangeOpts
+    extends SelfOnlyOpts,
+        EmitEventOpts,
+        FormEventOpts {}
 
 export interface BaseControl<T = any> {
-  readonly value?: T;
-  readonly status: Status;
-  readonly pristine: boolean;
-  readonly dirty: boolean;
-  readonly valid: boolean;
-  readonly invalid: boolean;
-  readonly pending: boolean;
-  readonly untouched: boolean;
-  readonly touched: boolean;
-  readonly enabled: boolean;
-  readonly disabled: boolean;
-  readonly root: BaseControl<any>;
-  readonly errors: Errors | null;
+    readonly value?: T;
+    readonly status: Status;
+    readonly pristine: boolean;
+    readonly dirty: boolean;
+    readonly valid: boolean;
+    readonly invalid: boolean;
+    readonly pending: boolean;
+    readonly untouched: boolean;
+    readonly touched: boolean;
+    readonly enabled: boolean;
+    readonly disabled: boolean;
+    readonly root: BaseControl<any>;
+    readonly errors: Errors | null;
 
-  updateValueAndValidity: (options: ControlChangeOpts) => void;
-  markAsTouched: (opts?: ControlChangeOpts) => void;
-  markAsPristine: (opts?: ControlChangeOpts) => void;
-  markAsUntouched: (opts?: ControlChangeOpts) => void;
-  markAsDirty: (opts?: ControlChangeOpts) => void;
-  markAsPending: (opts?: ControlChangeOpts) => void;
-  setErrors: (errors?: Errors | null, opts?: ControlChangeOpts) => void;
-  getError: (
-    errorCode: string,
-    path: string | Array<string | number>
-  ) => any | null;
-  hasError: (
-    errorCode: string,
-    path: string | Array<string | number>
-  ) => boolean;
-  updatePristine: (opts?: ControlChangeOpts) => void;
-  updateTouched: (opts?: ControlChangeOpts) => void;
-  reset: (formState: any, opts?: ControlChangeOpts) => void;
-  setValue: (value?: T, opts?: ControlChangeOpts) => void;
-  patchValue: (value?: T, opts?: ControlChangeOpts) => void;
-  emitEvents: (onlySelf?: boolean) => void;
+    updateValueAndValidity: (options: ControlChangeOpts) => void;
+    markAsTouched: (opts?: ControlChangeOpts) => void;
+    markAsPristine: (opts?: ControlChangeOpts) => void;
+    markAsUntouched: (opts?: ControlChangeOpts) => void;
+    markAsDirty: (opts?: ControlChangeOpts) => void;
+    markAsPending: (opts?: ControlChangeOpts) => void;
+    setErrors: (errors?: Errors | null, opts?: ControlChangeOpts) => void;
+    getError: (
+        errorCode: string,
+        path: string | Array<string | number>
+    ) => any | null;
+    hasError: (
+        errorCode: string,
+        path: string | Array<string | number>
+    ) => boolean;
+    updatePristine: (opts?: ControlChangeOpts) => void;
+    updateTouched: (opts?: ControlChangeOpts) => void;
+    reset: (formState: any, opts?: ControlChangeOpts) => void;
+    setValue: (value?: T, opts?: ControlChangeOpts) => void;
+    patchValue: (value?: T, opts?: ControlChangeOpts) => void;
+    emitEvents: (onlySelf?: boolean) => void;
 }