fix: fix form error style for input addonAfter slot when disabled (#6403), close #6374

Author: HeyXml

components/form/style/mixin.less

@@ -35,8 +35,8 @@
     color: @text-color;
   }
 
-  .@{ant-prefix}-input-group-addon,
-  .@{ant-prefix}-input-number-group-addon {
+  :not(.@{ant-prefix}-input-group-addon-disabled).@{ant-prefix}-input-group-addon,
+  :not(.@{ant-prefix}-input-number-group-addon-disabled).@{ant-prefix}-input-number-group-addon {
     color: @text-color;
     border-color: @border-color;
   }

components/input/ClearableLabeledInput.tsx

@@ -144,6 +144,7 @@ export default defineComponent({
         size,
         direction,
         hidden,
+        disabled,
       } = props;
       // Not wrap when there is not addons
       if (!hasAddon({ addonBefore, addonAfter })) {
@@ -152,10 +153,16 @@ export default defineComponent({
 
       const wrapperClassName = `${prefixCls}-group`;
       const addonClassName = `${wrapperClassName}-addon`;
+      // fix form error style for input addonAfter slot when disabled
+      const mergedAddonClassName = classNames(addonClassName, {
+        [`${addonClassName}-disabled`]: disabled,
+      });
       const addonBeforeNode = addonBefore ? (
-        <span class={addonClassName}>{addonBefore}</span>
+        <span class={mergedAddonClassName}>{addonBefore}</span>
+      ) : null;
+      const addonAfterNode = addonAfter ? (
+        <span class={mergedAddonClassName}>{addonAfter}</span>
       ) : null;
-      const addonAfterNode = addonAfter ? <span class={addonClassName}>{addonAfter}</span> : null;
 
       const mergedWrapperClassName = classNames(`${prefixCls}-wrapper`, wrapperClassName, {
         [`${wrapperClassName}-rtl`]: direction === 'rtl',