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

[luocong2016]

trafficstars

• [ ] 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<Props>, rulesRef?: Props | Ref<Props>, options?: { form?: xxx; immediate?: boolean; deep?: boolean; validateOnRuleChange?: boolean; debounce?: DebounceSettings; }, form?: xxx ): { form: xxx; getActivetFieldValues: xxxx; modelRef: Props | Ref<Props>; rulesRef: Props | Ref<Props>; initialModel: Props; validateInfos: validateInfos; resetFields: (newValues?: Props) => void; validate: <T = any>(names?: namesType, option?: validateOptions) => Promise<T>; 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[bot]]

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[bot]]

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.