fix: 修复表单项 requiredOn 无效问题 Close: #8071 (#8087)

packages/amis-core/src/renderers/wrapControl.tsx

@@ -336,46 +336,55 @@ export function wrapControl<
             const props = this.props;
             const model = this.model;
 
-            model &&
-              changedEffect(
-                [
-                  'id',
-                  'validations',
-                  'validationErrors',
-                  'value',
-                  'defaultValue',
-                  'required',
-                  'unique',
-                  'multiple',
-                  'delimiter',
-                  'valueField',
-                  'labelField',
-                  'joinValues',
-                  'extractValue',
-                  'selectFirst',
-                  'autoFill',
-                  'clearValueOnHidden',
-                  'validateApi',
-                  'minLength',
-                  'maxLength',
-                  'label',
-                  'extraName'
-                ],
-                prevProps.$schema,
-                props.$schema,
-                changes => {
-                  model.config({
-                    ...changes,
+            if (!model) {
+              return;
+            }
 
-                    // todo 优化后面两个
-                    isValueSchemaExp: isExpression(props.$schema.value),
-                    inputGroupControl: props?.inputGroupControl
-                  } as any);
-                }
-              );
+            changedEffect(
+              [
+                'id',
+                'validations',
+                'validationErrors',
+                'value',
+                'defaultValue',
+                'required',
+                'unique',
+                'multiple',
+                'delimiter',
+                'valueField',
+                'labelField',
+                'joinValues',
+                'extractValue',
+                'selectFirst',
+                'autoFill',
+                'clearValueOnHidden',
+                'validateApi',
+                'minLength',
+                'maxLength',
+                'label',
+                'extraName'
+              ],
+              prevProps.$schema,
+              props.$schema,
+              changes => {
+                model.config({
+                  ...changes,
+
+                  // todo 优化后面两个
+                  isValueSchemaExp: isExpression(props.$schema.value),
+                  inputGroupControl: props?.inputGroupControl
+                } as any);
+              }
+            );
+
+            if (props.required !== prevProps.required) {
+              model.config({
+                required: props.required
+              });
+            }
 
             // 此处需要同时考虑 defaultValue 和 value
-            if (model && typeof props.value !== 'undefined') {
+            if (typeof props.value !== 'undefined') {
               // 渲染器中的 value 优先
               if (
                 !isEqual(props.value, prevProps.value) &&
@@ -385,7 +394,6 @@ export function wrapControl<
                 model.changeTmpValue(props.value, 'controlled');
               }
             } else if (
-              model &&
               typeof props.defaultValue !== 'undefined' &&
               isExpression(props.defaultValue) &&
               (!isEqual(props.defaultValue, prevProps.defaultValue) ||
@@ -419,7 +427,7 @@ export function wrapControl<
                   props.onChange?.(curResult, model.name, false);
                 }
               }
-            } else if (model) {
+            } else {
               // value 非公式表达式时，name 值优先，若 defaultValue 主动变动时，则使用 defaultValue
               if (
                 // 然后才是查看关联的 name 属性值是否变化

packages/amis-core/src/store/formItem.ts

@@ -368,7 +368,7 @@ export const FormItemStore = StoreNode.named('FormItemStore')
         typeof maxLength === 'number'
       ) {
         rules = {
-          ...rules,
+          ...(rules ?? self.rules),
           isRequired: self.required || rules?.isRequired
         };
 
@@ -376,11 +376,11 @@ export const FormItemStore = StoreNode.named('FormItemStore')
         // 暂时先这样
         if (~['input-text', 'textarea'].indexOf(self.type)) {
           if (typeof minLength === 'number') {
-            rules.minLength = minLength;
+            (rules as any).minLength = minLength;
           }
 
           if (typeof maxLength === 'number') {
-            rules.maxLength = maxLength;
+            (rules as any).maxLength = maxLength;
           }
         }
 

packages/amis/__tests__/event-action/renderers/form/form.test.tsx

@@ -818,3 +818,58 @@ test('doAction:form static&nonstatic', async () => {
 
   expect(container).toMatchSnapshot();
 });
+
+test('doAction:form valdiate requiredOn', async () => {
+  const onSubmit = jest.fn();
+  const {container, getByText} = render(
+    amisRender(
+      {
+        type: 'form',
+        submitText: '提交表单',
+        body: [
+          {
+            type: 'radio',
+            name: 'a',
+            label: 'a'
+          },
+          {
+            type: 'input-text',
+            name: 'b',
+            requiredOn: '${a}',
+            label: 'b'
+          }
+        ]
+      },
+      {
+        onSubmit
+      },
+      makeEnv({})
+    )
+  );
+
+  fireEvent.click(getByText('提交表单'));
+  await wait(200);
+  expect(onSubmit).toBeCalled();
+
+  expect(container.querySelector('.cxd-Checkbox')!).toBeInTheDocument();
+  fireEvent.click(container.querySelector('.cxd-Checkbox')!);
+  await wait(200);
+  fireEvent.click(getByText('提交表单'));
+  await wait(200);
+
+  const ul = container.querySelector('.cxd-Form-feedback');
+  expect(ul).toBeInTheDocument();
+
+  fireEvent.change(container.querySelector('input[name="b"]')!, {
+    target: {value: '123'}
+  });
+  fireEvent.click(getByText('提交表单'));
+
+  await wait(200);
+  expect(onSubmit).toBeCalledTimes(2);
+
+  expect(onSubmit.mock.calls[1][0]).toMatchObject({
+    a: true,
+    b: '123'
+  });
+});