Asked Dec 4th, 2020 12:41 AM 270 0 1
  • 270 0 1
+1

Làm sao để lấy giá trị của name của form list trong antd design

Share
  • 270 0 1

Chào mn, mình có 1 form như hình, issue của mình làm sao mình lấy được name của datapicker nằm trong form item của form list và set lại giá trị của datapicker lấy từ localstorage

form.setFieldsValues({
     name: ['days_off_lists', 0, 'vacation_day'],
     type: ['10/12/2020'],
   });
<Form.List name="days_off_lists">
               {(fields, { add, remove }) => {
                 return (
                   <div>
                     {fields.map((field, index) => {
                       return (
                         <Row>
                           <div className="day-of-regist-input-last-form">
                             <Space
                               key={field.key}
                               style={{ display: 'flex', marginBottom: 8 }}
                               align="baseline"
                             >
                               <Col>
                                 <Form.Item
                                   {...field}
                                   name={[field.name, 'vacation_day']}
                                   fieldKey={[field.fieldKey, 'vacation_day']}
                                   rules={[
                                     {
                                       required: true,
                                       message: 'vacation day is require !!',
                                     },
                                   ]}
                                 >
                                   <DatePicker
                                     placeholder={constant.FORMAT_DATE}
                                     format={constant.FORMAT_DATE}
                                     style={{ width: 200 }}
                                   />
                                 </Form.Item>
                               </Col>
                               
                               {fields.length > 1 ? (
                                 <Button onClick={() => remove(field.name)}>
                                   {t('button.remove')}
                                 </Button>
                               ) : null}
                             </Space>
                           </div>
                           {/* {handleError()} */}
                         </Row>
                       );
                     })}
                     <Form.Item>
                       <Button onClick={() => add()} disabled={valueData}>
                         {t('button.add')}
                       </Button>
                     </Form.Item>
                   </div>
                 );
               }}
             </Form.List>

1 ANSWERS


Answered Dec 4th, 2020 1:00 AM
0

Bạn có thể tìm hiểu từ khóa initialValue trong document của antd nhé, hoặc bạn có thể sử dụng setFieldsValue cũng được nhưng mình thấy ở đây bạn đặt name={[field.name, 'vacation_day']}, nhưng ở trên bạn lại set ntn: name: ['days ... là sao nhỉ

Share
Avatar Tuan Minh @Tuan89
Dec 4th, 2020 1:41 AM

Trong setFieldsValue , name đó mình lấy cái value của cái name nằm trong form item, tức là nếu muốn truy cập được thằng vacation thì mình phải đi từ days_off_lists[0].vacation_vay, cái value của name đó mình đã lấy được nhưng không biết cách đổ giá trị vào thằng datapicker nằm trong form item

0
| Reply
Share
Avatar Nguyen Trung Thanh @NguyenTrungThanh
Dec 4th, 2020 2:18 AM

@Tuan89 name này là name của form.item nhé bạn, tức là bạn có thể hiểu name(của form.item): value(giá trị bạn muốn gàn vào thằng form.item). Mà nếu bạn chỉ muốn set giái trị default của form này thì bạn có thể tham khảo initialValues nhé. Trên document nó có hướng dẫn cách sử dụng luôn này https://ant.design/components/form/#components-form-demo-normal-login

0
| Reply
Share
Avatar Tuan Minh @Tuan89
Dec 4th, 2020 2:34 AM

@NguyenTrungThanh Mình muốn set giá trị date từ localstorage vào date picker ạ, còn như bn cmt thì bn hiểu sai ý mình rồi

0
| Reply
Share
Viblo
Let's register a Viblo Account to get more interesting posts.