How to make Form.Item component name as an array?

I have component <Form.Item label="Select Stand" name={["standIds"]}> I want modify component as a standIds array

14 Replies

kapa.ai•13mo ago

Hi @mflash.. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In Ant Design, you can use the name prop of the Form.Item component to specify the name of the field. If you want to handle an array of values, you can use the Form.List component. Here's an example from the refine.dev blog (https://refine.dev/blog/react-crud-app-with-dynamic-form-ant-design#adding-form-list):

<Form.List name={"skills"}>  
 {(fields, operator) => {  
 return (  
 <>  
 {fields.map((field, index) => {  
 return (  
 <div key={field.key}>  
 <Form.Item name={field.name} label={`skill - ${index + 1}`} rules={[{ required: true }]}>  
 <Input placeholder="e.g javascript" />  
 </Form.Item>  
 </div>  
 );  
 })}  
 <Form.Item>  
 <Button type="dashed" block>  
 Add a skill  
 </Button>  
 </Form.Item>  
 </>  
 );  
 }}  
</Form.List>

<Form.List name={"skills"}>  
 {(fields, operator) => {  
 return (  
 <>  
 {fields.map((field, index) => {  
 return (  
 <div key={field.key}>  
 <Form.Item name={field.name} label={`skill - ${index + 1}`} rules={[{ required: true }]}>  
 <Input placeholder="e.g javascript" />  
 </Form.Item>  
 </div>  
 );  
 })}  
 <Form.Item>  
 <Button type="dashed" block>  
 Add a skill  
 </Button>  
 </Form.Item>  
 </>  
 );  
 }}  
</Form.List>

In this example, Form.List is used to handle an array of skills. Each skill is a string, and you can add or remove skills dynamically. If you want to handle an array of standIds, you can replace "skills" with "standIds" and adjust the rest of the code accordingly. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

<@204169884727246849> kapa.ai is still learning and improving, please let us know how it did by reacting below

fair-roseOP•13mo ago

I want to use this code <Row> <Col span={12}> <Form.Item label="Select Stand" name={["standIds"]}> <Select {...selectPropsStands} allowClear style={{ width: "100%" }} placeholder="Please select" /> </Form.Item> </Col> <Col span={12}> <Form.Item label="Select price" name={["standCosts"]}> <Input /> </Form.Item> </Col> <Col span={12}> <Form.Item label="Select Stand" name={["standIds"]}> <Select {...selectPropsStands} allowClear style={{ width: "100%" }} placeholder="Please select" /> </Form.Item> </Col> <Col span={12}> <Form.Item label="Select price" name={["standCosts"]}> <Input /> </Form.Item> </Col> </Row> But when I make changes, changes affected to all same names component. I want modify components name as an array @kapa.ai I want to use this code <Row> <Col span={12}> <Form.Item label="Select Stand" name={["standIds"]}> <Select {...selectPropsStands} allowClear style={{ width: "100%" }} placeholder="Please select" /> </Form.Item> </Col> <Col span={12}> <Form.Item label="Select price" name={["standCosts"]}> <Input /> </Form.Item> </Col> <Col span={12}> <Form.Item label="Select Stand" name={["standIds"]}> <Select {...selectPropsStands} allowClear style={{ width: "100%" }} placeholder="Please select" /> </Form.Item> </Col> <Col span={12}> <Form.Item label="Select price" name={["standCosts"]}> <Input /> </Form.Item> </Col> </Row> But when I make changes, changes affected to all same names component. I want modify components name as an array

kapa.ai•13mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- In Ant Design, the name prop in Form.Item is used to set the name of the field in the form. If you use the same name for multiple fields, they will all refer to the same value in the form data. If you want each field to have its own value, you need to give each field a unique name. If you want to handle an array of values, you can use the Form.List component. Here's an example:

<Form.List name="stands">
  {(fields, { add, remove }) => (
    <>
      {fields.map(({ key, name, fieldKey, ...restField }) => (
        <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
          <Form.Item
            {...restField}
            name={[name, 'standId']}
            fieldKey={[fieldKey, 'standId']}
            rules={[{ required: true, message: 'Missing stand id' }]}
          >
            <Select {...selectPropsStands} allowClear style={{ width: "100%" }} placeholder="Please select" />
          </Form.Item>
          <Form.Item
            {...restField}
            name={[name, 'standCost']}
            fieldKey={[fieldKey, 'standCost']}
            rules={[{ required: true, message: 'Missing stand cost' }]}
          >
            <Input />
          </Form.Item>
          <MinusCircleOutlined onClick={() => remove(name)} />
        </Space>
      ))}
      <Form.Item>
        <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
          Add field
        </Button>
      </Form.Item>
    </>
  )}
</Form.List>

<Form.List name="stands">
  {(fields, { add, remove }) => (
    <>
      {fields.map(({ key, name, fieldKey, ...restField }) => (
        <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
          <Form.Item
            {...restField}
            name={[name, 'standId']}
            fieldKey={[fieldKey, 'standId']}
            rules={[{ required: true, message: 'Missing stand id' }]}
          >
            <Select {...selectPropsStands} allowClear style={{ width: "100%" }} placeholder="Please select" />
          </Form.Item>
          <Form.Item
            {...restField}
            name={[name, 'standCost']}
            fieldKey={[fieldKey, 'standCost']}
            rules={[{ required: true, message: 'Missing stand cost' }]}
          >
            <Input />
          </Form.Item>
          <MinusCircleOutlined onClick={() => remove(name)} />
        </Space>
      ))}
      <Form.Item>
        <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
          Add field
        </Button>
      </Form.Item>
    </>
  )}
</Form.List>

In this example, Form.List is used to handle an array of stands. Each stand is an object with standId and standCost properties. You can add or remove stands dynamically. Please note that this is a general example and you might need to adjust it according to your needs. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

<@204169884727246849> kapa.ai is still learning and improving, please let us know how it did by reacting below

fair-roseOP•13mo ago

@kapa.ai 'fieldKey' is deprecated.

kapa.ai•13mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, you're correct. In Ant Design 4.x, fieldKey is deprecated. You should use name instead. Here's the updated example:

<Form.List name="stands">
  {(fields, { add, remove }) => (
    <>
      {fields.map(({ key, name, ...restField }) => (
        <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
          <Form.Item
            {...restField}
            name={[name, 'standId']}
            rules={[{ required: true, message: 'Missing stand id' }]}
          >
            <Select {...selectPropsStands} allowClear style={{ width: "100%" }} placeholder="Please select" />
          </Form.Item>
          <Form.Item
            {...restField}
            name={[name, 'standCost']}
            rules={[{ required: true, message: 'Missing stand cost' }]}
          >
            <Input />
          </Form.Item>
          <MinusCircleOutlined onClick={() => remove(name)} />
        </Space>
      ))}
      <Form.Item>
        <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
          Add field
        </Button>
      </Form.Item>
    </>
  )}
</Form.List>

<Form.List name="stands">
  {(fields, { add, remove }) => (
    <>
      {fields.map(({ key, name, ...restField }) => (
        <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
          <Form.Item
            {...restField}
            name={[name, 'standId']}
            rules={[{ required: true, message: 'Missing stand id' }]}
          >
            <Select {...selectPropsStands} allowClear style={{ width: "100%" }} placeholder="Please select" />
          </Form.Item>
          <Form.Item
            {...restField}
            name={[name, 'standCost']}
            rules={[{ required: true, message: 'Missing stand cost' }]}
          >
            <Input />
          </Form.Item>
          <MinusCircleOutlined onClick={() => remove(name)} />
        </Space>
      ))}
      <Form.Item>
        <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
          Add field
        </Button>
      </Form.Item>
    </>
  )}
</Form.List>

In this updated example, fieldKey is removed and name is used instead. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

<@204169884727246849> kapa.ai is still learning and improving, please let us know how it did by reacting below

fair-roseOP•13mo ago

@kapa.ai modify code to user select only uniq values from standId

kapa.ai•13mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To ensure that only unique standId values can be selected, you can filter the options based on the current form values. However, this requires you to manage the state of the selected options outside of the form. Here's an example of how you can do this:

const [selectedStandIds, setSelectedStandIds] = useState([]);

<Form.List name="stands">
  {{(fields, {{ add, remove }}) => (
    <>
      {{fields.map(({{ key, name, ...restField }}) => (
        <Space key={{key}} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
          <Form.Item
            {{...restField}}
            name={{[name, 'standId']}}
            rules={{[{{ required: true, message: 'Missing stand id' }}]}}
          >
            <Select 
              {{...selectPropsStands}} 
              allowClear 
              style={{ width: "100%" }} 
              placeholder="Please select"
              onSelect={(value) => setSelectedStandIds([...selectedStandIds, value])}
              onDeselect={(value) => setSelectedStandIds(selectedStandIds.filter(id => id !== value))}
            >
              {{selectPropsStands.options.filter(option => !selectedStandIds.includes(option.value))}}
            </Select>
          </Form.Item>
          <Form.Item
            {{...restField}}
            name={{[name, 'standCost']}}
            rules={{[{{ required: true, message: 'Missing stand cost' }}]}}
          >
            <Input />
          </Form.Item>
          <MinusCircleOutlined onClick={{() => remove(name)}} />
        </Space>
      ))}}
      <Form.Item>
        <Button type="dashed" onClick={{() => add()}} block icon={{<PlusOutlined />}}>
          Add field
        </Button>
      </Form.Item>
    </>
  )}}
</Form.List>

const [selectedStandIds, setSelectedStandIds] = useState([]);

<Form.List name="stands">
  {{(fields, {{ add, remove }}) => (
    <>
      {{fields.map(({{ key, name, ...restField }}) => (
        <Space key={{key}} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
          <Form.Item
            {{...restField}}
            name={{[name, 'standId']}}
            rules={{[{{ required: true, message: 'Missing stand id' }}]}}
          >
            <Select 
              {{...selectPropsStands}} 
              allowClear 
              style={{ width: "100%" }} 
              placeholder="Please select"
              onSelect={(value) => setSelectedStandIds([...selectedStandIds, value])}
              onDeselect={(value) => setSelectedStandIds(selectedStandIds.filter(id => id !== value))}
            >
              {{selectPropsStands.options.filter(option => !selectedStandIds.includes(option.value))}}
            </Select>
          </Form.Item>
          <Form.Item
            {{...restField}}
            name={{[name, 'standCost']}}
            rules={{[{{ required: true, message: 'Missing stand cost' }}]}}
          >
            <Input />
          </Form.Item>
          <MinusCircleOutlined onClick={{() => remove(name)}} />
        </Space>
      ))}}
      <Form.Item>
        <Button type="dashed" onClick={{() => add()}} block icon={{<PlusOutlined />}}>
          Add field
        </Button>
      </Form.Item>
    </>
  )}}
</Form.List>

In this example, selectedStandIds is a state variable that keeps track of the currently selected standId values. The onSelect and onDeselect props of the Select component are used to update this state. The options of the Select component are filtered based on selectedStandIds to ensure that only unique standId values can be selected. Please note that this is a general example and you might need to adjust it according to your needs. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

<@204169884727246849> kapa.ai is still learning and improving, please let us know how it did by reacting below

fair-roseOP•13mo ago

@kapa.ai give full code

kapa.ai•13mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Sure, here's a full example of a form with a dynamic list of stands, where each stand has a unique standId and a standCost. This example uses Ant Design's Form, Form.List, Form.Item, Select, Input, Button, Space, and MinusCircleOutlined components:

import React, { useState } from 'react';
import { Form, Select, Input, Button, Space, MinusCircleOutlined } from 'antd';

const YourComponent = () => {
  const [selectedStandIds, setSelectedStandIds] = useState([]);
  const selectPropsStands = {
    options: [
      // Your options here
    ],
  };
return (
    <Form>
      <Form.List name="stands">
        {(fields, { add, remove }) => (
          <>
            {fields.map(({ key, name, ...restField }) => (
              <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
                <Form.Item
                  {...restField}
                  name={[name, 'standId']}
                  rules={[{ required: true, message: 'Missing stand id' }]}
                >
                  <Select 
                    {...selectPropsStands} 
                    allowClear 
                    style={{ width: "100%" }} 
                    placeholder="Please select"
                    onSelect={(value) => setSelectedStandIds([...selectedStandIds, value])}
                    onDeselect={(value) => setSelectedStandIds(selectedStandIds.filter(id => id !== value))}
                  >
                    {selectPropsStands.options.filter(option => !selectedStandIds.includes(option.value))}
                  </Select>
                </Form.Item>
                <Form.Item
                  {...restField}
                  name={[name, 'standCost']}
                  rules={[{ required: true, message: 'Missing stand cost' }]}
                >
                  <Input />
                </Form.Item>
                <MinusCircleOutlined onClick={() => remove(name)} />
              </Space>
            ))}
            <Form.Item>
              <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                Add field
              </Button>
            </Form.Item>
          </>
        )}
      </Form.List>
    </Form>
  );
};

export default YourComponent;

import React, { useState } from 'react';
import { Form, Select, Input, Button, Space, MinusCircleOutlined } from 'antd';

const YourComponent = () => {
  const [selectedStandIds, setSelectedStandIds] = useState([]);
  const selectPropsStands = {
    options: [
      // Your options here
    ],
  };
return (
    <Form>
      <Form.List name="stands">
        {(fields, { add, remove }) => (
          <>
            {fields.map(({ key, name, ...restField }) => (
              <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
                <Form.Item
                  {...restField}
                  name={[name, 'standId']}
                  rules={[{ required: true, message: 'Missing stand id' }]}
                >
                  <Select 
                    {...selectPropsStands} 
                    allowClear 
                    style={{ width: "100%" }} 
                    placeholder="Please select"
                    onSelect={(value) => setSelectedStandIds([...selectedStandIds, value])}
                    onDeselect={(value) => setSelectedStandIds(selectedStandIds.filter(id => id !== value))}
                  >
                    {selectPropsStands.options.filter(option => !selectedStandIds.includes(option.value))}
                  </Select>
                </Form.Item>
                <Form.Item
                  {...restField}
                  name={[name, 'standCost']}
                  rules={[{ required: true, message: 'Missing stand cost' }]}
                >
                  <Input />
                </Form.Item>
                <MinusCircleOutlined onClick={() => remove(name)} />
              </Space>
            ))}
            <Form.Item>
              <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                Add field
              </Button>
            </Form.Item>
          </>
        )}
      </Form.List>
    </Form>
  );
};

export default YourComponent;

Please replace // Your options here with your actual options for the Select component. Each option should be an object with value and label properties. This is a general example and you might need to adjust it according to your needs. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

<@204169884727246849> kapa.ai is still learning and improving, please let us know how it did by reacting below

How to make Form.Item component name as an array?

Did you find this page helpful?