TextFormField即使在插入值后也会显示错误信息（使用Form Flutter）。

Question

我正在尝试使用flutter，我被一个愚蠢的问题所困扰。我已经在一个屏幕上定义了两个TextInputField，并且我正在使用Form进行验证。一切都很好，我唯一的问题是，错误不会消失，即使是在插入的值是罚款。

下面是输入值之前的截图。错误显示在屏幕的开始处。

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

你可以看到，当我点击注册按钮时，数值被打印在日志中。

小工具类

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

国家级

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 属性，当验证失败时，会显示验证器回调返回的消息。所以为了解决这个问题，你只需要删除了 errorText 从您的TextFormField。

Answer 2

根据我的经验，最好自己控制autoValidate属性。因此，下面是一个例子 此处

首先设置类布尔变量 。

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;
              }