Flutter中如何在用户输入时隐藏Text Form Field的验证警告？

方法一：使用FormFieldKey清除单个字段错误 #

给每个TextFormField单独设置GlobalKey<FormFieldState>，在用户点击输入或开始输入时，主动清除该字段的错误状态。

示例代码：

// 为每个输入框定义专属的FormFieldKey
final emailFieldKey = GlobalKey<FormFieldState>();
final passwordFieldKey = GlobalKey<FormFieldState>();
final _formKey = GlobalKey<FormState>();

@override
Widget build(BuildContext context) {
  return Form(
    key: _formKey,
    child: Column(
      children: [
        TextFormField(
          key: emailFieldKey,
          validator: (value) {
            if (value == null || value.isEmpty) {
              return '请输入邮箱';
            }
            if (!RegExp(r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$').hasMatch(value)) {
              return '请输入有效邮箱';
            }
            return null;
          },
          onTap: () {
            // 用户点击输入框时清除错误提示
            emailFieldKey.currentState?.setError(null);
          },
          decoration: const InputDecoration(labelText: '邮箱'),
        ),
        TextFormField(
          key: passwordFieldKey,
          validator: (value) {
            if (value == null || value.isEmpty) {
              return '请输入密码';
            }
            if (value.length < 6) {
              return '密码长度不能少于6位';
            }
            return null;
          },
          onChanged: (value) {
            // 用户输入内容时清除错误提示
            passwordFieldKey.currentState?.setError(null);
          },
          obscureText: true,
          decoration: const InputDecoration(labelText: '密码'),
        ),
        ElevatedButton(
          onPressed: () {
            if (_formKey.currentState!.validate()) {
              // 验证通过后的业务逻辑
            }
          },
          child: const Text('提交'),
        ),
      ],
    ),
  );
}

方法二：结合AutovalidateMode自动控制错误显示 #

通过设置Form的autovalidateMode为AutovalidateMode.onUserInteraction，让输入框在用户交互（输入、点击）时自动重新验证，自动清除不符合当前输入的错误提示，同时保留提交时的完整验证逻辑。

示例代码：

final _formKey = GlobalKey<FormState>();

@override
Widget build(BuildContext context) {
  return Form(
    key: _formKey,
    // 设置自动验证模式：用户交互时自动验证
    autovalidateMode: AutovalidateMode.onUserInteraction,
    child: Column(
      children: [
        TextFormField(
          validator: (value) {
            if (value == null || value.isEmpty) {
              return '请输入邮箱';
            }
            if (!RegExp(r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$').hasMatch(value)) {
              return '请输入有效邮箱';
            }
            return null;
          },
          decoration: const InputDecoration(labelText: '邮箱'),
        ),
        TextFormField(
          validator: (value) {
            if (value == null || value.isEmpty) {
              return '请输入密码';
            }
            if (value.length < 6) {
              return '密码长度不能少于6位';
            }
            return null;
          },
          obscureText: true,
          decoration: const InputDecoration(labelText: '密码'),
        ),
        ElevatedButton(
          onPressed: () {
            if (_formKey.currentState!.validate()) {
              // 验证通过后的业务逻辑
            }
          },
          child: const Text('提交'),
        ),
      ],
    ),
  );
}

两种方法的适用场景 #

• 方法一灵活性更高，可精确控制清除错误的时机（比如仅点击时清除，或仅输入时清除），适合需要自定义交互逻辑的场景。
• 方法二更简洁，利用Flutter内置机制实现自动控制，无需额外维护字段Key，适合常规表单场景。

内容的提问来源于stack exchange，提问作者Harshit