Form.useForm hopes to add the from parameter to get the active field

[luocong2016]

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

Form.useForm 希望可以加入 from 参数, 获取哪些是当前Form 表单激活状态(包括隐藏，不包含渲染)的字段。
比如: 通过 ref 获取 Form的validate 获取已渲染DOM字段的有效值

<Form form={form} />

What does the proposed API look like?

/*
modelRef, ruleRef` 必须是响应式数据
*/

interface Props {
[key: string]: any;
}
function useForm(
modelRef: Props | Ref,
rulesRef?: Props | Ref,
options?: {
form?: xxx;
immediate?: boolean;
deep?: boolean;
validateOnRuleChange?: boolean;
debounce?: DebounceSettings;
},
form?: xxx
): {
form: xxx;
getActivetFieldValues: xxxx;
modelRef: Props | Ref;
rulesRef: Props | Ref;
initialModel: Props;
validateInfos: validateInfos;
resetFields: (newValues?: Props) => void;
validate: <T = any>(names?: namesType, option?: validateOptions) => Promise;
validateField: (
name?: string,
value?: any,
rules?: [Record<string, unknown>],
option?: validateOptions,
) => Promise<RuleError[]>;
mergeValidateInfo: (items: ValidateInfo | ValidateInfo[]) => ValidateInfo;
clearValidate: (names?: namesType) => void;
onValidate?: (
name: string | number | string[] | number[],
status: boolean,
errorMsgs: string[] | null,
) => void;
};

[luocong2016]

原因

const A = () => <>
    <Form.Item label="AA" name="A"><Form.Item>
</>

const B = () => <>
   <Form.Item name="B"><Form.Item>
</>

// 这里的model 是 `reactive` 会影响 `reset`；感觉是BUG
<Form model={xx} >
   ｛ v === 'A' ? <A /> : <B /> }
</Form>

不接受只能桥接一下了

export const useAntdForm = (
  formRef: Ref<any>,
  modelRef?: any,
  rulesRef?: any,
  options?: any
) => {
  const form = Form.useForm(modelRef, rulesRef, options);

  // 仅为了获取当前激活表单字段
  const getActivetFields = () => {
    const _form = unref(formRef);
    if (!_form) {
      return [];
    }
    return Object.keys(_form.getFieldsValue());
  };

  // 获取当前激活字段中的有效值
  const validateFields = (): Promise<Record<string, any>> => {
    if (!form) {
      return Promise.resolve({});
    }
    const files = getActivetFields();
    return form.validate(files);
  };

  return {
    ...form,
    getActivetFields,
    validateFields 
  };
};

使用

const { validateFields  } = useAntdForm (formRef, modelRef, rulesRef, options)

validateFields().then(res => {
  console.log(res)
})

[github-actions]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.