fix(form): after setting validateTrigger, trigger should be excluded (

#1963)
jdf2e · Mar 1, 2024 · 6e40c53 · 6e40c53
1 parent cf15911
commit 6e40c53
Show file tree

Hide file tree

Showing 9 changed files with 206 additions and 6 deletions.
diff --git a/src/packages/form/__tests__/form.spec.tsx b/src/packages/form/__tests__/form.spec.tsx
@@ -22,6 +22,52 @@ test('form set initialValues', () => {
   )
 })
 
+test('form validateTrigger', async () => {
+  const { container, rerender } = render(
+    <Form>
+      <Form.Item
+        label="字段A"
+        name="username"
+        required
+        validateTrigger="onBlur"
+        rules={[{ required: true, message: '请输入字段A' }]}
+      >
+        <Input placeholder="请输入字段A" type="text" />
+      </Form.Item>
+    </Form>
+  )
+  const input = container.querySelector('.nut-input-native')
+  if (input) {
+    fireEvent.focus(input)
+    fireEvent.blur(input)
+    await waitFor(() => {
+      const errorMessage = container.querySelector('.nut-form-item-body-tips')
+      expect(errorMessage).toBeTruthy()
+    })
+  }
+  rerender(
+    <Form initialValues={{ username: 'NutUI-React' }}>
+      <Form.Item
+        label="字段A"
+        name="username"
+        required
+        validateTrigger={['onBlur']}
+        rules={[{ required: true, message: '请输入字段A' }]}
+      >
+        <Input placeholder="请输入字段A" type="text" />
+      </Form.Item>
+    </Form>
+  )
+  if (input) {
+    fireEvent.focus(input)
+    fireEvent.blur(input)
+    await waitFor(() => {
+      const errorMessage = container.querySelector('.nut-form-item-body-tips')
+      expect(errorMessage).toBeTruthy()
+    })
+  }
+})
+
 test('useForm', () => {
   const App = () => {
     const [form] = Form.useForm()

diff --git a/src/packages/form/demo.taro.tsx b/src/packages/form/demo.taro.tsx
@@ -79,6 +79,7 @@ const FormDemo = () => {
       radioOption: '选项',
       picker: '选择器',
       select: '请选择',
+      validateTrigger: '校验触发时机',
     },
     'en-US': {
       basic: 'Basic Usage',
@@ -137,6 +138,7 @@ const FormDemo = () => {
       radioOption: 'radio',
       picker: 'Picker',
       select: 'Please select',
+      validateTrigger: 'Validate Trigger',
     },
   })
   const [state, SetState] = useState({
@@ -475,6 +477,19 @@ const FormDemo = () => {
           </Form.Item>
         </Form>
 
+        <h2>{translated.validateTrigger}</h2>
+        <Form>
+          <Form.Item
+            label={translated.name}
+            name="username"
+            required
+            validateTrigger="onBlur"
+            rules={[{ required: true, message: translated.nameTip }]}
+          >
+            <Input placeholder={translated.nameTip1} type="text" />
+          </Form.Item>
+        </Form>
+
         <h2>{translated.title5}</h2>
         <Form
           style={{ '--nutui-form-item-label-width': '120px' }}

diff --git a/src/packages/form/demo.tsx b/src/packages/form/demo.tsx
@@ -75,6 +75,7 @@ const FormDemo = () => {
       radioOption: '选项',
       picker: '选择器',
       select: '请选择',
+      validateTrigger: '校验触发时机',
     },
     'en-US': {
       basic: 'Basic Usage',
@@ -133,6 +134,7 @@ const FormDemo = () => {
       radioOption: 'radio',
       picker: 'Picker',
       select: 'Please select',
+      validateTrigger: 'Validate Trigger',
     },
   })
 
@@ -431,6 +433,19 @@ const FormDemo = () => {
           </Form.Item>
         </Form>
 
+        <h2>{translated.validateTrigger}</h2>
+        <Form>
+          <Form.Item
+            label={translated.name}
+            name="username"
+            required
+            validateTrigger="onBlur"
+            rules={[{ required: true, message: translated.nameTip }]}
+          >
+            <Input placeholder={translated.nameTip1} type="text" />
+          </Form.Item>
+        </Form>
+
         <h2>{translated.title5}</h2>
         <Form
           style={{ '--nutui-form-item-label-width': '120px' }}

diff --git a/src/packages/form/doc.en-US.md b/src/packages/form/doc.en-US.md
@@ -339,7 +339,38 @@ export default App;
 
 :::
 
-### form type
+### Validate Trigger 
+
+:::demo
+
+```tsx
+import React from "react";
+import { Form, Input } from '@nutui/nutui-react';
+
+const App = () => {
+  return (
+    <>
+      <Form>
+        <Form.Item
+          label="Field A"
+          name="username"
+          required
+          validateTrigger="onBlur"
+          rules={[{ required: true, message: "Place Input Field A" }]}
+        >
+          <Input placeholder="Place Input Field A" type="text" />
+        </Form.Item>
+      </Form>
+    </>
+  )
+}
+
+export default App;
+```
+
+:::
+
+### Form Type
 
 :::demo
 

diff --git a/src/packages/form/doc.md b/src/packages/form/doc.md
@@ -334,6 +334,37 @@ export default App;
 
 :::
 
+### 校验触发时机
+
+:::demo
+
+```tsx
+import React from "react";
+import { Form, Input } from '@nutui/nutui-react';
+
+const App = () => {
+  return (
+    <>
+      <Form>
+        <Form.Item
+          label="字段A"
+          name="username"
+          required
+          validateTrigger="onBlur"
+          rules={[{ required: true, message: "请输入字段A" }]}
+        >
+          <Input placeholder="请输入字段A" type="text" />
+        </Form.Item>
+      </Form>
+    </>
+  )
+}
+
+export default App;
+```
+
+:::
+
 ### 表单类型
 
 :::demo

diff --git a/src/packages/form/doc.taro.md b/src/packages/form/doc.taro.md
@@ -340,6 +340,37 @@ export default App;
 
 :::
 
+### 校验触发时机
+
+:::demo
+
+```tsx
+import React from "react";
+import { Form, Input } from '@nutui/nutui-react-taro';
+
+const App = () => {
+  return (
+    <>
+      <Form>
+        <Form.Item
+          label="字段A"
+          name="username"
+          required
+          validateTrigger="onBlur"
+          rules={[{ required: true, message: "请输入字段A" }]}
+        >
+          <Input placeholder="请输入字段A" type="text" />
+        </Form.Item>
+      </Form>
+    </>
+  )
+}
+
+export default App;
+```
+
+:::
+
 ### 表单类型
 
 :::demo

diff --git a/src/packages/form/doc.zh-TW.md b/src/packages/form/doc.zh-TW.md
@@ -332,7 +332,38 @@ export default App;
 
 :::
 
-### 錶單類型
+### 校驗觸發時機
+
+:::demo
+
+```tsx
+import React from "react";
+import { Form, Input } from '@nutui/nutui-react';
+
+const App = () => {
+  return (
+    <>
+      <Form>
+        <Form.Item
+          label="欄位A"
+          name="username"
+          required
+          validateTrigger="onBlur"
+          rules={[{ required: true, message: "請輸入欄位A" }]}
+        >
+          <Input placeholder="請輸入欄位A" type="text" />
+        </Form.Item>
+      </Form>
+    </>
+  )
+}
+
+export default App;
+```
+
+:::
+
+### 表單類型
 
 :::demo
 

diff --git a/src/packages/formitem/formitem.taro.tsx b/src/packages/formitem/formitem.taro.tsx
@@ -123,8 +123,8 @@ export class FormItem extends React.Component<
     if (validateTrigger) {
       validateTriggers =
         typeof validateTrigger === 'string'
-          ? [...validateTriggers, validateTrigger]
-          : [...validateTriggers, ...validateTrigger]
+          ? [validateTrigger]
+          : [...validateTrigger]
       validateTriggers.forEach((trigger) => {
         const originTrigger = controlled[trigger]
         controlled[trigger] = (...args: any) => {

diff --git a/src/packages/formitem/formitem.tsx b/src/packages/formitem/formitem.tsx
@@ -123,8 +123,8 @@ export class FormItem extends React.Component<
     if (validateTrigger) {
       validateTriggers =
         typeof validateTrigger === 'string'
-          ? [...validateTriggers, validateTrigger]
-          : [...validateTriggers, ...validateTrigger]
+          ? [validateTrigger]
+          : [...validateTrigger]
       validateTriggers.forEach((trigger) => {
         const originTrigger = controlled[trigger]
         controlled[trigger] = (...args: any) => {