CODEWITHSUNDEEP
reactjsantdreact-forms
rasif sahl
rasif sahl

Reputation: 203

How to update the form input field with a name attribute

<Input
   label="Retail price"
   editMode
   name="retail_price"
   rules={[{ required: true, message: validationRequiredText('retail price') }]}
   type="number"
   min={1}
/>

In this how can I update and Set the form values using the name="retail_price"?

I tried on other answers on google but didn't get the expected output.

Upvotes: 0

Views: 351

Answers (3)

asep hidayat
asep hidayat

Reputation: 151

To set the value by name you can use the useForm hook:

const [form] = Form.useForm();
    
const onSubmit = () => {
  form.setFieldsValue({ retail_price: '200000' });
}

<Button type="primary" onClick={onSubmit}>submit example</Button>

<Form form={form}>
  <Form.Item name="retail_price" label="Retail price" rules={[{ required: true, message: validationRequiredText('retail price') }]}>
    <Input editMode type="number" min={1} />
  </Form.Item>
</Form>

Upvotes: 1

Ravi kishore
Ravi kishore

Reputation: 1

you can use react-hook-form library to manage values of the input. here is offical documention

import React from "react";
import { useForm } from "react-hook-form";

export default function FormValidation() {
  const {
    register,
    handleSubmit
  } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <div>
      <form
        onSubmit={handleSubmit(onSubmit)}
      >
          <Input
            placeholder="Retail price"
            type="text"
            {...register("retail_price"}
          />
        <Button type="submit">Submit</Button>
      </form>
    </div>
  );
}

Upvotes: 0

brian3t
brian3t

Reputation: 26

Modern browsers support native querySelectorAll so you can do:

document.querySelectorAll('[name="retail_price"]');

Hope this helps.

Upvotes: 0

Related Questions