即使在插入值后 TextFormField 仍显示错误消息（使用 Form Flutter）

Question

我正在试验 flutter，但遇到了一个愚蠢的问题。我在一个屏幕中定义了两个 TextInputField，并且我正在使用 Form 进行验证。一切正常，我唯一的问题是，即使插入的值正常，错误也不会消失。

下面是输入值前的截图。屏幕开头也显示错误。

下面是输入值后的画面。当我点击注册按钮时，仍然显示错误。

您可以看到，当我单击“注册”按钮时，值会打印在日志中。

小部件Class

class SignUpForm extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return SignUpState();
  }
}

状态Class

class SignUpState extends State<SignUpForm> {
  final _fbKey = GlobalKey<FormState>();
  final UserDetails userDetails = UserDetails();
  bool _autoValidate = true;

  @override
  Widget build(BuildContext context) {
    return CustomScreenBg(
      AppString.additional_information,
      CustomCard(_getSignUpForm(context)),
    );
  }

  _getSignUpForm(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(12),
      child: Form(
        key: _fbKey,
        autovalidate: _autoValidate,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                RichText(
                  text: TextSpan(
                    text: AppString.welcome_to,
                    style: TextStyle(
                      color: AppColor.BLACK.toColor,
                      fontSize: 18,
                    ),
                    children: <TextSpan>[
                      TextSpan(
                        text: '${AppString.app_name}',
                        style: TextStyle(
                          fontSize: 24,
                          color: AppColor.PRIMARY_COLOR.toColor,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
            SizedBox(height: 4),
            Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                SubTitleText(AppString.lets_get_started),
              ],
            ),
            SizedBox(height: 16),
            Column(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                TextFormField(
                  decoration: InputDecoration(
                    labelText: AppString.enter_name,
                    errorText: AppString.error_name,
                  ),
                  keyboardType: TextInputType.text,
                  validator: (value) {
                    if (value.length < 4) {
                      return AppString.error_name;
                    }
                    return null;
                  },
                  onSaved: (name) {
                    userDetails.name = name;
                  },
                ),
                SizedBox(height: 16),
                TextFormField(
                  decoration: InputDecoration(
                    labelText: AppString.enter_email,
                    errorText: AppString.error_email,
                  ),
                  keyboardType: TextInputType.text,
                  validator: (value) {
                    if (value.length < 5 || !value.contains('@')) {
                      return AppString.error_email;
                    }
                    return null;
                  },
                  onSaved: (email) {
                    userDetails.email = email;
                  },
                ),
              ],
            ),
            SizedBox(height: 24),
            Row(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                CustomButton(
                  AppString.sign_up,
                  () {
                    _onSubmit();
                  },
                  textColor: AppColor.WHITE.toColor,
                  bgColor: AppColor.PRIMARY_COLOR.toColor,
                ),
              ],
            ),
            SizedBox(height: 12)
          ],
        ),
      ),
    );
  }

  _onSubmit() {
    if (_fbKey.currentState.validate()) {
      _fbKey.currentState.save();
      print(userDetails.name);
      print(userDetails.email);
    } else {
      setState(() {
        _autoValidate = true;
      });
    }
  }
}

单击“注册”按钮时将调用此方法。

_onSubmit() {
    if (_fbKey.currentState.validate()) {
      _fbKey.currentState.save();
      print(userDetails.name);
      print(userDetails.email);
    } else {
      setState(() {
        _autoValidate = true;
      });
    }
  }

谁能帮我弄清楚，我做错了什么？

Answer 1

您不必设置errorText 属性，当验证失败时它会显示验证器回调返回的消息。因此，要解决此问题，您只需从 TextFormField 中删除 errorText。

Answer 2

根据我的经验，最好自己控制 autoValidate 属性。因此，以

中的示例为例

首先设置class布尔变量：

bool _autovalidate = false;

然后将其传递给您的表单：

Form(
key: _fbKey,
autovalidate: _autovalidate,
... 
)

然后在你的验证器中：

validator: (value) {
                if (value.length < 5 || !value.contains('@')) {

                  return AppString.error_email;
                  setState(() => _autoValidate = true);
                }
                return null;
              }

Answer 3

TextFormFiled 自 v1.19 以来有一个新的属性，称为 autovalidateMode。它提供多种模式，但我认为 AutovalidateMode.onUserInteraction 效果最好。它只会在每次用户交互后自动验证表单。

即使在插入值后 TextFormField 仍显示错误消息（使用 Form Flutter）

TextFormField displaying error message even after the values are inserted (using Form Flutter)

dart

flutter

flutter-dependencies

flutter-layout