如何重置 TextFormField 中的错误消息？

Question

我知道这是一个简单的问题，但我没有找到如何做到这一点。当用户在字段中输入内容时，如何重置 TextFormField 中的错误消息。像 onchange 监听器之类的东西。我注意到 onChanged 在 TextField 中可用，但在 TextFormField 中不可用。我该怎么做？

final _email = Container(
  child: TextFormField(
    decoration: InputDecoration(labelText: email),
    keyboardType: TextInputType.emailAddress,
    controller: emailController,
    validator: _validateEmail,
    onSaved: (input) => _stringEmail = input.toLowerCase().trim(),
  ),
);

更新：我正在使用控制器为用户输入添加侦听器。但我只想重置错误消息而不是再次验证表单。这可能吗？我该怎么做？

  _resetEmailErrorMessage() {
    print("Second text field: ${emailController.text}");
    //replace clear to something that can reset the validation error message
    emailController.clear();
  }

  @override
  void initState() {
    super.initState();

    //start listening to changes
    emailController.addListener(_resetEmailErrorMessage);
  }

Answer 1

您可以使用Form的自动验证功能

如果您正在寻找此解决方案，

“只要你输入它就会验证你的输入并显示/隐藏错误”

Flutter 提供自动验证功能，您只需要在表单级别启用它。

1. 默认

   _autoValidate = false;

2. 表格

    body: Form( key: _formKey,
                autovalidate: _autoValidate,....)

1. 当用户按一次提交时启用它，

    if (_formKey.currentState.validate()) {
      // All Good
    } else {
      // start auto validate
      setState(() {
        _autoValidate = true;
      });
    }

更新：-

现在Form.autovalidate 已被弃用。所以使用

Form.autovalidateMode = AutovalidateMode.onUserInteraction 

Answer 2

Form.autovalidate 已被弃用。使用Form.autovalidateMode = AutovalidateMode.onUserInteraction 可以在用户再次开始与表单字段交互时自动清除错误，而无需自己管理任何状态。

Answer 3

TextFormField 也有 onChanged 选项，您可以尝试通过 FormKey 重置表单验证

final _email = Container(
 child: TextFormField(
 decoration: InputDecoration(labelText: email),
  keyboardType: TextInputType.emailAddress,
  controller: emailController,
  validator: _validateEmail,
  onChanged: (value){
    formKey.currentState.reset();
  },
  onSaved: (input) => _stringEmail = 
   input.toLowerCase().trim(),
  ),
);

Answer 4

我建议使用控制器并听取用户输入。并且每当他输入内容时，您都可以再次验证（）您的表单

Answer 5

// Somewhere in `State` declaration 
final formKey = GlobalKey<FormState>();
bool autovalidate = false;

@override
void build(BuildContext context) {
  return Form(
    key: formKey,
    autovalidate: autovalidate,
    child: Column(
      children: [
        TextFormField(
          ...
          validator: (value) {
            return (value == null || value.isEmpty) ? 'Cannot be empty' : null;
          }
          onChanged: (value) {
            // Call this to refresh autovalidation result
            setState(() {});
          }
        ),
      ],
    ),
  );
}

void validate() {
  if(formKey.currentState.validate()) {
    // data is valid!
    return true;
  } elsee {
    // Activate autovalidation
    autovalidate = true;
  }
  return false;
}

Answer 6

我没有看到您的问题的任何答案。我也遇到过这样的情况，我希望身份验证表单的字段在用户更改为登录或注册后重置其验证错误。所以我添加了这个逻辑：

class _AuthFormState extends State<AuthForm> {
...
  var _formFlipped = false;                                   // THIS RIGHT HERE

  void _trySubmit() {
    final isValid = _formKey.currentState.validate();
    FocusScope.of(context).unfocus();
    ...
  }

  @override
  Widget build(BuildContext context) {
    return 
      ...
            child: Form(
                ...
                  TextFormField(
                    key: ValueKey('email'),
                    validator: (value) {
                      if (_formFlipped) return null;          // THIS
                      if (value.isEmpty || !value.contains('@')) {
                        return 'Enter a valid email';
                      }
                      return null;
                    },
                    ...
                    RaisedButton(
                      child: Text(_isLogin ? 'Login' : 'Signup'),
                      onPressed: () {
                        setState(() {
                          _formFlipped = false;               // AND THIS
                        });
                        _trySubmit();
                      },
                    ),
                    FlatButton(
                      child: Text(_isLogin
                          ? 'Create new account'
                          : 'I already have an account'),
                      onPressed: () {                         // THIS TOO
                        setState(() {
                          _isLogin = !_isLogin;
                          _formFlipped = true;
                          _formKey.currentState.validate();
                        });
                      },
                    ),
        ...

Before & After.

编辑：

所以基本上你只需在所有字段验证器上强制传递null 即可清除消息。或者，正如Yogesh 指出的那样，您只需_formKey.currentState.reset(); 即可实现这一目标

但是如果您需要更精细的控制，这种方法对您很有帮助，因为您可以根据需要为不同的字段设置if (_formFlipped) return null;或类似的条件。

Answer 7

这是一种有效的形式。您可以尝试像这样验证表单：

_formKey.currentState.validate()

您需要在TextFormField 中定义验证字段。