CODEWITHSUNDEEP
formsreactjsantd
Shibu
Shibu

Reputation: 181

How to use setFieldValue and pass the value as props between components

I'm trying to use ant design forms in my sample registration form, when i'm trying to use setFieldsValue it throws error as "Cannot use setFieldsValue unless getFieldDecorator is used". But I had already used getFieldDecorator in my code.Here is a sample of my code. 

handleChange = (e) => {
  const fname = e.target.name;
  const fvalue = e.target.value;
  this.props.setFieldsValue({
    fname: fvalue
  });
}
render(){
  const { getFieldDecorator } = this.props.form
  return (
    <Row gutter={4}>
      <Col className="reg-personal-details-grid-column" span={24}>
        <FormItem {...formItemLayout} label="First Name">
          {getFieldDecorator("firstName", {
            rules: [
              {
                required: true
              }
            ]
          })(
            <Input
              placeholder="First Name"
              required
              name="firstName"
              onChange={this.handleChange}
            />
            )}
        </FormItem>
      </Col>
    </Row>
  )
}

Upvotes: 7

Views: 80356

Answers (4)

Brhane Giday
Brhane Giday

Reputation: 333

In Antd v4, you only required to call the setFieldsValue in useEffect function.

    const [form] = Form.useForm()
    
     useEffect(() => {
      //companyInfo -> dynamic obj fetched from API
     form.setFieldsValue(companyInfo);
     }, [companyInfo, form]);

Then in Form use the form prop as follow:

     <Form
     //passing form prop 
      form={form}
      labelCol={{ span: 8 }}
      wrapperCol={{ span: 14 }}
      onFinish={onFinish}
      labelAlign="left"
      colon={false}
    >

Upvotes: 3

Hamidreza Sadegh
Hamidreza Sadegh

Reputation: 2196

you can use it like this

const formRef = useRef(null);

useEffect(() => {
 formRef.current?.setFieldsValue({
  name: data?.firstName,
 });
}, [data]);

return (
  <Form ref={formRef}>
    <Form.Item name="name">
      <Input/>
    </Form.Item>

Upvotes: 0

Rodrigo Brand&#227;o
Rodrigo Brand&#227;o

Reputation: 31

You can create your own function to do this:

export const setFieldValue = (
    form: FormInstance,
    name: NamePath,
    value: string
): void => {
    if (form && form.getFieldValue(name)) {
        const fixname: string[] = [];
        if (typeof name == 'object') {
            name.forEach((node: string) => {
                fixname.push(node);
            });
        } else {
            fixname.push(String(name));
        }
        let fieldsValue: unknown;
        fixname.reverse().forEach((node: string) => {
            fieldsValue = {
                [String(node)]: fieldsValue != undefined ? fieldsValue : value,
            };
        });
        form.setFieldsValue(fieldsValue);
    }
};

and you can use like that

setFieldValue(form, 'phone', '1111111111');

or

setFieldValue(form, ['phones', 'mobile'], '2222222222');

Upvotes: 3

Vicky
Vicky

Reputation: 141

fname is not defined in getFieldDecorator.

You should do this:

handleChange = (e) => {
  const fname = e.target.name;
  const fvalue = e.target.value;
  this.props.form.setFieldsValue({
    [fname]: fvalue
  });
}

Upvotes: 10

Related Questions