Flutter表单重置后仍显示验证错误问题排查

需求逻辑 #

• 点击加号按钮时，未输入值需显示验证错误
• 输入有效值后点击加号可添加至列表（此功能正常）
• 添加完成后表单重置，不应再显示验证提示

当前问题 #

表单重置后，验证错误提示仍未消失，演示效果如下：

组件代码 #

class CaratMinMaxFields extends FormField<Range> {
  final String? title;

  /// The minimum allowed value for the range. Defaults to 0.
  final double minValue;

  /// The maximum allowed value for the range. Defaults to 100.
  final double maxValue;

  /// A callback function called when the range values change.
  /// This callback getting triggered does not mean the text field have validated value.
  final ValueChanged<Range?>? onChanged;

  final TextEditingController minController;
  final TextEditingController maxController;
  final AutovalidateMode? validateMode;
  final Range? range;
  static bool _fakeValidator = true;

  CaratMinMaxFields({
    this.title,
    this.minValue = 0,
    this.maxValue = 100,
    this.onChanged,
    this.validateMode = AutovalidateMode.disabled,
    this.range,
    required this.minController,
    required this.maxController,
    super.key,
  }) : super(
          autovalidateMode: validateMode,
          initialValue: range,
          validator: (Range? range) {
             if (_fakeValidator) return null;

            if (range == null || (range.from == null && range.to == null)) {
              return AppRouter.navigatorKey.currentContext?.localizations
                  .enterValueRangeErrorWithString('0.15', '50.00');
            }
            if (range.from == null) {
              return AppRouter.navigatorKey.currentContext?.localizations
                  .fromFieldCannotBeEmpty;
            }

            if (range.to == null) {
              return AppRouter.navigatorKey.currentContext?.localizations
                  .toFieldCannotBeEmpty;
            }

            final isFromGreaterThanTo =
                (range.from ?? double.maxFinite) > (range.to ?? 0);
            final isFromSmallerThanMinValue =
                (range.from ?? double.maxFinite) < minValue;
            final isToGreaterThanMaxValue =
                (range.to ?? double.maxFinite) > maxValue;
            if (isFromGreaterThanTo) {
              return AppRouter.navigatorKey.currentContext?.localizations
                  .minGreaterThanMaxValueError;
            }
            if (isFromSmallerThanMinValue || isToGreaterThanMaxValue) {
              return AppRouter.navigatorKey.currentContext?.localizations
                  .enterValueRangeErrorWithString(
                      minValue.toStringAsFixed(2),
                     maxValue.toStringAsFixed(2));
            }
            return null;
          },
          builder: (FormFieldState<Range> state) {
            return Builder(
              builder: (context) {
                return Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: [
                    if (title != null) ...{
                      Text(
                        title,
                        style: CoreTextStyle.sRegular,
                      ),
                      16.height,
                    },
                    Row(
                      children: [
                        Expanded(
                          flex: 3,
                          child: CoreLeadingInputField(
                            title: context.localizations.from,
                            controller: minController,
                            onChanged: (value) {
                              _fakeValidator = true;
                              final fromValueInNum =
                                  num.tryParse(value.replaceAll(",", "."));

                              if (fromValueInNum == null) {
                                if (state.value?.to == null) {
                                  state.reset();
                                  state.didChange(const Range());
                                } else {
                                  state.didChange(
                                    (Range(to: state.value?.to)),
                                  );
                                }
                              } else {
                                state.didChange(
                                  (state.value ?? const Range())
                                      .copyWith(from: fromValueInNum),
                                );
                              }
                              state.validate();
                              _fakeValidator = false;
                              onChanged?.call(state.value);
                            },
                            keyboardType: const TextInputType.numberWithOptions(
                              decimal: true,
                            ),
                            textInputFormatter: [
                              FilteringTextInputFormatter.allow(
                                twoDecimalPlaceNumber,
                              ),
                            ],
                            hasError: state.hasError,
                          ),
                        ),
                        const Spacer(),
                        Expanded(
                          flex: 3,
                          child: CoreLeadingInputField(
                            title: context.localizations.to,
                            controller: maxController,
                            onChanged: (value) {
                              debugPrint('onChanged-----$value');
                              _fakeValidator = true;
                              final toValueInNum =
                                  num.tryParse(value.replaceAll(",", "."));

                              if (toValueInNum == null) {
                                if (state.value?.from == null) {
                                  state.reset();
                                  state.didChange(const Range());
                                } else {
                                  state.didChange(
                                    Range(from: state.value?.from),
                                  );
                                }
                              } else {
                                state.didChange(
                                  (state.value ?? const Range()).copyWith(
                                    to: toValueInNum,
                                  ),
                                );
                              }
                              state.validate();
                              _fakeValidator = false;
                              onChanged?.call(state.value);
                            },
                            keyboardType: const TextInputType.numberWithOptions(
                              decimal: true,
                            ),
                            textInputFormatter: [
                              FilteringTextInputFormatter.allow(
                                twoDecimalPlaceNumber,
                              ),
                            ],
                            hasError: state.hasError,
                          ),
                        ),
                      ],
                    ),
                    if (state.hasError) ...{
                      4.height,
                      Text(
                        state.errorText!,
                        style: CoreTextStyle.sRegular.copyWith(
                          color: context.colorScheme.error,
                        ),
                      ),
                    },
                  ],
                );
              },
            );
          },
        );

  @override
  FormFieldState<Range> createState() => CaratMinMaxTextFields();
}

class CaratMinMaxTextFields extends FormFieldState<Range> {
  @override
  void didUpdateWidget(covariant FormField<Range> oldWidget) {
    setValue(widget.initialValue);
    validate();
    super.didUpdateWidget(oldWidget);
  }
}

问题根源 #

1. 静态变量_fakeValidator导致状态污染：该变量为类静态属性，所有CaratMinMaxFields实例共享同一值，重置表单后可能仍处于false状态，导致验证器返回错误。
2. didUpdateWidget强制触发验证：自定义状态类中每次更新组件都会调用validate()，即使表单重置为空白初始值，也会强制验证并保留错误状态。
3. 重置操作未清除错误标记：调用state.reset()后未主动清除表单错误状态，UI仍会显示之前的错误提示。

修复步骤 #

1. 移除静态_fakeValidator，改用局部逻辑控制

静态变量会跨实例残留状态，直接去掉该变量，调整验证触发时机：

// 移除类中的static bool _fakeValidator = true;

在输入框onChanged中不需要临时跳过验证，改为仅在提交时触发验证，或者通过AutovalidateMode控制自动验证时机。

2. 修改didUpdateWidget逻辑，避免重置时强制验证

重置表单时初始值为空白，此时不应触发验证，同时主动清除错误：

class CaratMinMaxTextFields extends FormFieldState<Range> {
  @override
  void didUpdateWidget(covariant FormField<Range> oldWidget) {
    final initialValue = widget.initialValue;
    setValue(initialValue);
    
    // 仅当初始值非空白时才验证，重置时清除错误
    if (initialValue != null && (initialValue.from != null || initialValue.to != null)) {
      validate();
    } else {
      setError(null);
    }
    
    super.didUpdateWidget(oldWidget);
  }
}

3. 重置操作时主动清除错误

在输入框onChanged的重置分支中添加清除错误的逻辑：

if (fromValueInNum == null) {
  if (state.value?.to == null) {
    state.reset();
    state.setError(null); // 新增：清除错误状态
    state.didChange(const Range());
  } else {
    state.didChange(Range(to: state.value?.to));
    state.setError(null); // 新增：清除错误状态
  }
}

4. 优化验证触发时机

去掉onChanged中直接调用state.validate()的逻辑，改用AutovalidateMode.onUserInteraction实现输入时自动验证，或者仅在提交表单时统一验证，避免不必要的错误提示。

内容的提问来源于stack exchange，提问作者Farhana Naaz Ansari