feat: demonstration of adding "warn"

Ohh-889 · Ohh-889 · commit e85c7f44b580 · 2025-09-08T15:03:30.000+08:00
diff --git a/packages/ui/src/components/form/index.ts b/packages/ui/src/components/form/index.ts
@@ -1,6 +1,6 @@
 'use client';
 
-export { Form, useFieldError, useFieldErrors, useFieldState, useForm } from 'skyroc-form';
+export { Form, useFieldError, useFieldErrors, useFieldState, useForm,useFieldsState } from 'skyroc-form';
 
 export { default as FormField } from './FormField';
 
diff --git a/playground/src/app/(demo)/form/modules/validateWaring.tsx b/playground/src/app/(demo)/form/modules/validateWaring.tsx
@@ -0,0 +1,104 @@
+'use client';
+
+import { useEffect } from 'react';
+import { Button, Card, Form, FormField, useFieldsState, useForm } from 'soybean-react-ui';
+
+import { DemoInput } from './DemoComponents';
+import { showToastCode } from './toast';
+
+type Inputs = {
+  email: string;
+  username: string;
+};
+
+const ValidateOnlyDemo = () => {
+  const [form] = useForm<Inputs>();
+
+  const fieldsState = useFieldsState(form, ['email', 'username'], { warnings: true });
+
+  async function validateOnly() {
+    await form.validateFields();
+    const result = form.getFieldsWarning();
+
+    showToastCode('warning result', result);
+  }
+
+  useEffect(() => {
+    const warnings = fieldsState
+      .filter(field => field.warnings.length > 0)
+      .reduce(
+        (acc, field) => {
+          acc[field.name] = field.warnings;
+          return acc;
+        },
+        {} as Record<string, string[]>
+      );
+
+    showToastCode('warnings', warnings);
+  }, [fieldsState]);
+
+  return (
+    <Card title="Validate Only Demo">
+      <Form
+        className="w-[480px] max-sm:w-full space-y-4"
+        form={form}
+      >
+        <FormField
+          label="Username"
+          name="username"
+          rules={[
+            { message: 'Username is required', required: true, warningOnly: true },
+            { message: 'Username must be at least 4 characters', minLength: 4, warningOnly: true }
+          ]}
+        >
+          <DemoInput
+            name="username"
+            placeholder="Username"
+          />
+        </FormField>
+
+        <FormField
+          label="Age"
+          name="age"
+          rules={[
+            { message: 'Age is required', required: true },
+            { message: 'Age must be at least 18', min: 18, type: 'number', warningOnly: true },
+            { max: 35, message: 'Age must be less than 35', type: 'number', warningOnly: true }
+          ]}
+        >
+          <DemoInput
+            name="age"
+            placeholder="Age"
+          />
+        </FormField>
+
+        <FormField
+          label="Email"
+          name="email"
+          rules={[
+            { message: 'Please enter a valid email', type: 'email', warningOnly: true },
+            { message: 'Email is required', required: true }
+          ]}
+        >
+          <DemoInput
+            name="email"
+            placeholder="Email"
+          />
+        </FormField>
+
+        <div className="flex gap-4">
+          <Button
+            type="button"
+            onClick={validateOnly}
+          >
+            Validate Only
+          </Button>
+
+          <Button type="submit">Submit (Normal)</Button>
+        </div>
+      </Form>
+    </Card>
+  );
+};
+
+export default ValidateOnlyDemo;
diff --git a/playground/src/app/(demo)/form/page.tsx b/playground/src/app/(demo)/form/page.tsx
@@ -1,6 +1,7 @@
 import Default from './modules/Default';
 import FieldChange from './modules/FieldChange';
 import Validate from './modules/validate';
+import ValidateWarning from './modules/validateWaring';
 
 const FormPage = () => {
   return (
@@ -10,6 +11,8 @@ const FormPage = () => {
       <FieldChange />
 
       <Validate />
+
+      <ValidateWarning />
     </div>
   );
 };
diff --git a/primitives/filed-form /src/FieldContext.ts b/primitives/filed-form /src/FieldContext.ts
@@ -1,16 +1,16 @@
 'use client';
 /* eslint-disable no-bitwise */
 
-import { createContext, useContext, useEffect, useRef, useState } from 'react';
+import { createContext, useContext, useEffect, useState } from 'react';
 import { flushSync } from 'react-dom';
 import type { AllPaths, PathToDeepType, ShapeFromPaths } from 'skyroc-type-utils';
 
 import type { ChangeMask, SubscribeMaskOptions } from './form-core/event';
-import { ChangeTag, toMask } from './form-core/event';
+import { toMask } from './form-core/event';
 import type { Action, Middleware } from './form-core/middleware';
 import type { FieldEntity } from './form-core/types';
 import type { ValidateMessages } from './form-core/validate';
-import type { Rule } from './form-core/validation';
+import type { Rule, ValidateOptions } from './form-core/validation';
 import type { FormState } from './types';
 import type { Meta } from './types/shared-types';
 
@@ -24,6 +24,7 @@ export interface ValuesOptions<Values = any> {
 export interface StateOptions<Values = any> {
   getField: <T extends AllPaths<Values>>(name: T) => Meta<T, PathToDeepType<Values, T>>;
   getFieldError: (name: AllPaths<Values>) => string[];
+  getFields: (names?: AllPaths<Values>[]) => Meta<AllPaths<Values>, PathToDeepType<Values, AllPaths<Values>>>[];
   getFieldsError: (...name: AllPaths<Values>[]) => Record<AllPaths<Values>, string[]>;
   getFieldsWarning: (...name: AllPaths<Values>[]) => Record<AllPaths<Values>, string[]>;
   getFieldWarning: (name: AllPaths<Values>) => string[];
@@ -37,14 +38,28 @@ export interface StateOptions<Values = any> {
     cb: (value: PathToDeepType<Values, T>, key: T, all: Values, fired: ChangeMask) => void,
     opt?: { includeChildren?: boolean; mask?: ChangeMask }
   ) => () => void;
+  subscribeFields: (
+    names: AllPaths<Values>[],
+    cb: (
+      value: PathToDeepType<Values, AllPaths<Values>>,
+      key: AllPaths<Values>,
+      all: Values,
+      fired: ChangeMask
+    ) => void,
+    opt?: { includeChildren?: boolean; mask?: ChangeMask }
+  ) => () => void;
+}
+
+export interface ValidateFieldsOptions extends ValidateOptions {
+  dirty?: boolean;
 }
 
 export interface OperationOptions<Values = any> {
   resetFields: (...names: AllPaths<Values>[]) => void;
   submit: () => void;
   use: (mw: Middleware) => void;
   validateField: (name: AllPaths<Values>) => Promise<boolean>;
-  validateFields: (...names: AllPaths<Values>[]) => Promise<boolean>;
+  validateFields: (names?: AllPaths<Values>[], opts?: ValidateFieldsOptions) => Promise<boolean>;
 }
 
 export interface ValidateErrorEntity<Values = any> {
@@ -157,27 +172,78 @@ export const useFieldState = <Values = any>(
   return state;
 };
 
+export const useFieldsState = <Values = any>(
+  form: FormInstance<Values>,
+  names: AllPaths<Values>[],
+  mask: SubscribeMaskOptions = {
+    errors: true,
+    touched: true,
+    validated: true,
+    validating: true,
+    warnings: true
+  }
+) => {
+  const state = form.getFields(names);
+
+  // eslint-disable-next-line react/hook-use-state
+  const [_, forceUpdate] = useState({});
+
+  useEffect(() => {
+    let unregister: () => void;
+    if (!names || names.length === 0) {
+      // 监听所有字段
+      unregister = form.subscribeField(
+        '' as AllPaths<Values>,
+        () => {
+          flushSync(() => {
+            forceUpdate({});
+          });
+        },
+        {
+          includeChildren: true,
+          mask: toMask(mask)
+        }
+      );
+    } else {
+      unregister = form.subscribeFields(
+        names,
+        () => {
+          flushSync(() => {
+            forceUpdate({});
+          });
+        },
+        {
+          mask: toMask(mask)
+        }
+      );
+    }
+
+    // 只监听传入的字段
+    return unregister;
+  }, []);
+
+  return state;
+};
+
 export const useFieldError = <Values = any>(name: AllPaths<Values>) => {
   const state = useFieldState<Values>(name, { errors: true });
 
   return state.errors;
 };
 
-export const useFieldErrors = <Values = any>(form: FormInstance<Values>): Record<AllPaths<Values>, string[]> => {
-  const [errors, setErrors] = useState({});
-
-  useEffect(() => {
-    return form.subscribeField(
-      '' as AllPaths<Values>,
-      () => {
-        setErrors(form.getFieldsError());
-      },
-      {
-        includeChildren: true,
-        mask: ChangeTag.Errors
-      }
-    );
-  }, [form]);
+export const useFieldErrors = <Values = any>(
+  form: FormInstance<Values>,
+  names: AllPaths<Values>[] = []
+): Record<AllPaths<Values>, string[]> => {
+  const state = useFieldsState<Values>(form, names, { errors: true });
+
+  const errors = state.reduce(
+    (acc, field) => {
+      acc[field.name] = field.errors;
+      return acc;
+    },
+    {} as Record<AllPaths<Values>, string[]>
+  );
 
   return errors as Record<AllPaths<Values>, string[]>;
 };
diff --git a/primitives/filed-form /src/createStore.ts b/primitives/filed-form /src/createStore.ts
diff --git a/primitives/filed-form /src/index.ts b/primitives/filed-form /src/index.ts
