From 55a28698183998e6dec73d8d41d5e5f029d17e7a Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Tue, 18 Nov 2025 19:13:56 +0800
Subject: [PATCH] =?UTF-8?q?fix(form):=20=E6=96=87=E6=9C=AC=E8=BE=93?=
 =?UTF-8?q?=E5=85=A5change=E5=87=BA=E5=8F=91=E5=A4=AA=E9=A2=91=E7=B9=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/form/src/fields/Number.vue      | 18 ++++++++++++++---
 packages/form/src/fields/NumberRange.vue | 25 ++++++++++++++++++++----
 packages/form/src/fields/Text.vue        | 16 +++++++++++++--
 packages/form/src/fields/Textarea.vue    | 18 ++++++++++++++---
 4 files changed, 65 insertions(+), 12 deletions(-)

diff --git a/packages/form/src/fields/Number.vue b/packages/form/src/fields/Number.vue
index 3474298c..99ce2ceb 100644
--- a/packages/form/src/fields/Number.vue
+++ b/packages/form/src/fields/Number.vue
@@ -1,7 +1,7 @@
 <template>
   <TMagicInputNumber
     v-if="model"
-    :model-value="model[name]"
+    v-model="value"
     clearable
     controls-position="right"
     :size="size"
@@ -10,13 +10,13 @@
     :step="config.step"
     :placeholder="config.placeholder"
     :disabled="disabled"
-    @update:model-value="changeHandler"
+    @change="changeHandler"
     @input="inputHandler"
   ></TMagicInputNumber>
 </template>
 
 <script lang="ts" setup>
-import { inject } from 'vue';
+import { inject, ref, watch } from 'vue';
 
 import { TMagicInputNumber } from '@tmagic/design';
 
@@ -34,6 +34,18 @@ const emit = defineEmits<{
   input: [values: number];
 }>();
 
+const value = ref<number>();
+
+watch(
+  () => props.model[props.name],
+  (v) => {
+    value.value = v;
+  },
+  {
+    immediate: true,
+  },
+);
+
 useAddField(props.prop);
 
 const mForm = inject<FormState | null>('mForm');
diff --git a/packages/form/src/fields/NumberRange.vue b/packages/form/src/fields/NumberRange.vue
index 9aedb263..bd594225 100644
--- a/packages/form/src/fields/NumberRange.vue
+++ b/packages/form/src/fields/NumberRange.vue
@@ -1,24 +1,26 @@
 <template>
   <div class="m-fields-number-range">
     <TMagicInput
-      :model-value="model[name][0]"
+      v-model="firstValue"
       :clearable="config.clearable ?? true"
       :size="size"
       :disabled="disabled"
-      @update:model-value="minChangeHandler"
+      @change="minChangeHandler"
     ></TMagicInput>
     <span class="split-tag">-</span>
     <TMagicInput
-      :model-value="model[name][1]"
+      v-model="secondValue"
       :clearable="config.clearable ?? true"
       :size="size"
       :disabled="disabled"
-      @update:model-value="maxChangeHandler"
+      @change="maxChangeHandler"
     ></TMagicInput>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { ref, watch } from 'vue';
+
 import { TMagicInput } from '@tmagic/design';
 
 import type { FieldProps, NumberRangeConfig } from '../schema';
@@ -34,6 +36,21 @@ const emit = defineEmits<{
   change: [values: [number, number]];
 }>();
 
+const firstValue = ref<number>();
+const secondValue = ref<number>();
+
+watch(
+  () => props.model[props.name],
+  ([first, second]) => {
+    firstValue.value = first;
+    secondValue.value = second;
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+);
+
 useAddField(props.prop);
 
 if (!Array.isArray(props.model[props.name])) {
diff --git a/packages/form/src/fields/Text.vue b/packages/form/src/fields/Text.vue
index e4050391..3ad63257 100644
--- a/packages/form/src/fields/Text.vue
+++ b/packages/form/src/fields/Text.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="m-fields-text">
     <TMagicInput
-      :model-value="model[name]"
+      v-model="value"
       ref="input"
       clearable
       :size="size"
       :placeholder="config.placeholder"
       :disabled="disabled"
-      @update:model-value="changeHandler"
+      @change="changeHandler"
       @input="inputHandler"
       @keyup="keyUpHandler($event)"
     >
@@ -67,6 +67,18 @@ useAddField(props.prop);
 
 const mForm = inject<FormState | undefined>('mForm');
 
+const value = ref('');
+
+watch(
+  () => props.model[props.name],
+  (v) => {
+    value.value = v;
+  },
+  {
+    immediate: true,
+  },
+);
+
 const appendConfig = computed(() => {
   if (typeof props.config.append === 'string') {
     return {
diff --git a/packages/form/src/fields/Textarea.vue b/packages/form/src/fields/Textarea.vue
index c6e30ca9..2a9707ea 100644
--- a/packages/form/src/fields/Textarea.vue
+++ b/packages/form/src/fields/Textarea.vue
@@ -1,20 +1,20 @@
 <template>
   <TMagicInput
-    :model-value="model[name]"
+    v-model="value"
     type="textarea"
     :size="size"
     clearable
     :placeholder="config.placeholder"
     :disabled="disabled"
     :rows="config.rows"
-    @update:model-value="changeHandler"
+    @change="changeHandler"
     @input="inputHandler"
   >
   </TMagicInput>
 </template>
 
 <script lang="ts" setup>
-import { inject } from 'vue';
+import { inject, ref, watch } from 'vue';
 
 import { TMagicInput } from '@tmagic/design';
 
@@ -32,6 +32,18 @@ const emit = defineEmits<{
   input: [value: string];
 }>();
 
+const value = ref('');
+
+watch(
+  () => props.model[props.name],
+  (v) => {
+    value.value = v;
+  },
+  {
+    immediate: true,
+  },
+);
+
 useAddField(props.prop);
 
 const mForm = inject<FormState | null>('mForm');