feat: form表单组件新增initialValue初始值属性 (#671)

src/packages/form/demo.tsx

@@ -18,6 +18,7 @@ interface T {
   title10: string
   title2: string
   title3: string
+  title4: string
   name: string
   nameTip: string
   nameTip1: string
@@ -60,7 +61,8 @@ const FormDemo = () => {
       title1: '动态表单',
       title10: '顶部对齐',
       title2: '表单校验',
-      title3: '表单类型',
+      title3: '带有初始值表单校验',
+      title4: '表单类型',
       name: '姓名',
       nameTip: '请输入姓名',
       nameTip1: '请输入姓名',
@@ -100,7 +102,8 @@ const FormDemo = () => {
       title1: 'Dynamic Form',
       title10: 'Top Align',
       title2: 'Validate Form',
-      title3: 'Form Type',
+      title3: 'InitialValue Validate Type',
+      title4: 'Form Type',
       name: 'Name',
       nameTip: 'Please enter your name',
       nameTip1: 'Please enter name',
@@ -250,7 +253,32 @@ const FormDemo = () => {
             <input type="submit" value={translated.submit} />
           </Cell>
         </Form>
+
         <h2>{translated.title3}</h2>
+        <Form
+          onFinish={(obj) => submitSucceed(obj)}
+          onFinishFailed={(error) => submitFailed(error)}
+        >
+          <Form.Item
+            label={translated.name}
+            name="username"
+            rules={[{ required: true, message: translated.nameTip }]}
+            initialValue="张三"
+          >
+            <Input placeholder={translated.nameTip1} type="text" />
+          </Form.Item>
+          <Form.Item label={translated.age} name="age">
+            <Input
+              placeholder={translated.ageTip1}
+              type="number"
+              defaultValue="18"
+            />
+          </Form.Item>
+          <Cell>
+            <input type="submit" value={translated.submit} />
+          </Cell>
+        </Form>
+        <h2>{translated.title4}</h2>
         <Form
           onFinish={(obj) => submitSucceed(obj)}
           onFinishFailed={(error) => submitFailed(error)}

src/packages/form/doc.en-US.md

@@ -12,7 +12,7 @@ import { Form } from '@nutui/nutui-react'
 
 ### Basic Usage
 :::demo
-```
+```tsx
 import  React from "react";
 import { Form, Input, TextArea } from '@nutui/nutui-react';
 const App = () => {
@@ -40,7 +40,7 @@ export default App;
 ### Top Align
 
 :::demo
-```
+```tsx
 import  React from "react";
 import { Form, Input, TextArea } from '@nutui/nutui-react';
 const App = () => (
@@ -64,7 +64,7 @@ export default App;
 
 ### Validate Form
 :::demo
-```
+```tsx
 import  React from "react";
 import { Form, Input, Cell } from '@nutui/nutui-react';
 
@@ -103,10 +103,46 @@ export default App;
 ```
 :::
 
+### InitialValue Validate Type
+:::demo
+
+```tsx
+import  React from "react";
+import { Form, Input, Cell } from '@nutui/nutui-react';
+
+const App = () => {
+  return (
+    <>
+      <Form
+        onFinish={(obj) => submitSucceed(obj)}
+        onFinishFailed={(error) => submitFailed(error)}
+      >
+        <Form.Item label='Name' name="username" initialValue="zhangsan">
+          <Input
+            className="nut-input-text"
+            placeholder='Please enter your name'
+            type="text"
+          />
+        </Form.Item>
+        <Form.Item label='Age' name="age">
+          <Input placeholder='Please enter age' type="number" defaultValue="18" />
+        </Form.Item>
+        <Cell>
+          <input type="submit" value='Submit' />
+        </Cell>
+      </Form>
+    </>
+  )
+}
+
+export default App;
+```
+:::
+
 ### Form Type
 
 :::demo
-```
+```tsx
 import  React from "react";
 import { Form, Input, Cell, Switch, Checkbox, Radio, Rate, Range } from '@nutui/nutui-react';
 
@@ -176,6 +212,7 @@ export default App;
 | name | the field of the form field is required when the form verification function is used | string | - |
 | labelWidth | The width of the form item label. The default unit is `px` | number \| string | `90px`  |
 | errorMessageAlign | Error prompt text alignment. The optional values are `center` and `right`  | string           | `left`  |
+| initialValue`v1.4.7` | Set child element default value                  | string           | -  |
 
 ### Form.Item Rule Data Structure
 

src/packages/form/doc.md

@@ -113,6 +113,43 @@ export default App;
 ```
 :::
 
+### 带有初始值表单校验
+:::demo
+
+```tsx
+import  React from "react";
+import { Form, Input, Cell } from '@nutui/nutui-react';
+
+const App = () => {
+  return (
+    <>
+      <Form
+        onFinish={(obj) => submitSucceed(obj)}
+        onFinishFailed={(error) => submitFailed(error)}
+      >
+        <Form.Item label='姓名' name="username" initialValue="张三">
+          <Input
+            className="nut-input-text"
+            placeholder='请输入姓名'
+            type="text"
+          />
+        </Form.Item>
+        <Form.Item label='年龄' name="age">
+          <Input placeholder='请填写年龄' type="number" defaultValue="18" />
+        </Form.Item>
+        <Cell>
+          <input type="submit" value='提交' />
+        </Cell>
+      </Form>
+    </>
+  )
+}
+
+export default App;
+```
+:::
+
+
 ### 表单类型
 
 :::demo
@@ -186,6 +223,7 @@ export default App;
 | name                | 在使用表单校验功能的情况下，该属性是必填的 | string           | -       |
 | labelWidth         | 表单项 label 宽度，默认单位为`px` | number \| string | `90px`  |
 | errorMessageAlign | 错误提示文案对齐方式，可选值为 `center` `right`                  | string           | `left`  |
+| initialValue`v1.4.7` | 设置子元素默认值                  | string           | -  |
 
 ### Form.Item Rule 数据结构
 

src/packages/form/useForm.ts

@@ -46,14 +46,14 @@ class FormStore {
       ...this.store,
       ...newStore,
     }
-    this.fieldEntities.forEach((enetity: FieldEntity) => {
-      const { name } = enetity.props
-      Object.keys(newStore).forEach((key) => {
-        if (key === name) {
-          enetity.onStoreChange()
-        }
-      })
-    })
+    // this.fieldEntities.forEach((enetity: FieldEntity) => {
+    //   const { name } = enetity.props
+    //   Object.keys(newStore).forEach((key) => {
+    //     if (key === name) {
+    //       enetity.onStoreChange()
+    //     }
+    //   })
+    // })
   }
 
   /**
@@ -93,7 +93,7 @@ class FormStore {
           this.errList.push(...errors)
           // 表单项更新
         }
-        entity.onStoreChange()
+        // entity.onStoreChange()
       })
     })
     return err

src/packages/formitem/formitem.tsx

@@ -17,6 +17,7 @@ export interface FormItemProps extends BasicComponent, BaseFormField {
   errorMessageAlign: TextAlign
   showErrorLine: boolean
   showErrorMessage: boolean
+  initialValue: string
 }
 
 const defaultProps = {
@@ -30,6 +31,7 @@ const defaultProps = {
   errorMessageAlign: 'left',
   showErrorLine: true,
   showErrorMessage: true,
+  initialValue: '',
 } as FormItemProps
 
 export type FieldProps = typeof defaultProps & Partial<BaseFormField>
@@ -60,13 +62,19 @@ export class FormItem extends React.Component<FieldProps> {
     const { name } = this.props
     const type = (children as any).type.NAME
 
+    const defaultvalue =
+      this.props.initialValue || (children as any).props?.defaultValue
+    if (defaultvalue) {
+      setFieldsValue({ [name]: defaultvalue })
+    }
+
     return {
       value: getFieldValue(name),
       onChange: (
         event: React.ChangeEvent<HTMLInputElement> | number | string | string[]
       ) => {
         const originOnChange = (children as any).props.onChange
-        if(originOnChange){
+        if (originOnChange) {
           originOnChange(event)
         }
         let newValue = event
@@ -83,7 +91,7 @@ export class FormItem extends React.Component<FieldProps> {
   }
 
   onStoreChange = () => {
-    this.forceUpdate()
+    // this.forceUpdate()
   }
 
   renderLayout = (childNode: React.ReactNode) => {
@@ -156,10 +164,17 @@ export class FormItem extends React.Component<FieldProps> {
   }
 
   render() {
-    const { children } = this.props
+    const { children, initialValue } = this.props
     const c = Array.isArray(children) ? children[0] : children
+
+    let restCNode = c as React.ReactElement
+    if (initialValue) {
+      restCNode = React.cloneElement(c as React.ReactElement, {
+        defaultValue: initialValue,
+      })
+    }
     const returnChildNode = React.cloneElement(
-      c as React.ReactElement,
+      restCNode,
       this.getControlled(c as React.ReactElement)
     )
     return this.renderLayout(returnChildNode)