TextFormField 验证错误消息 - Flutter

Question

我已经实现了我创建的

SignIn

屏幕，因为我也需要在另一个屏幕中使用它，但我担心的是，当有人在电子邮件字段中输入值时，即使没有输入任何内容，它也会在密码字段中显示错误然而。这是一张图片：

登录：

customTextFormField

自定义文本表单字段：

class SignIn extends StatefulWidget {
  const SignIn({super.key});

  @override
  State<SignIn> createState() => _SignInState();
}

class _SignInState extends State<SignIn> {
  TextEditingController _emailController = TextEditingController();
  TextEditingController _passwordController = TextEditingController();

  final _sformkey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                'Sign In',
                style: TextStyle(fontSize: 22,fontWeight: FontWeight.w600),
              ),
              SizedBox(height: 10),
              Form(
                key: _sformkey,
                autovalidateMode: AutovalidateMode.onUserInteraction,
                child: Column(
                  children: [
                    //Email field
                    CustomTextFormField(
                      controller: _emailController,
                      hintText: 'Email',
                      keyboardType: TextInputType.emailAddress,
                      validator: (value) {
                        if (value == null || value.isEmpty) {
                          return "Please enter email address";
                        } else if (!RegExp(
                            r'^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$')
                            .hasMatch(value)) {
                          return 'Please enter a valid email address';
                        }
                        return null;
                      },
                    ),
                    SizedBox(height: 4),
                    //Password field
                    CustomTextFormField(
                      controller: _passwordController,
                      hintText: 'Password',
                      keyboardType: TextInputType.visiblePassword,
                      validator: (value) {
                        if (value == null || value.isEmpty) {
                          return 'The email or password you have entered is incorrect.';
                        }
                        return null;
                      },
                    ),
                    SizedBox(height: 20),
                    //Sign In Button
                    GestureDetector(
                      onTap: () {
                        if (_sformkey.currentState!.validate()) {
                          Navigator.pushReplacementNamed(context, '/nextpage');
                        }
                      },
                      child: Container(
                        //SignIn Button
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

我也尝试过

class CustomTextFormField extends StatelessWidget {
  const CustomTextFormField(
      {super.key,
        required this.controller,
        required this.hintText,
        required this.keyboardType,
        required this.validator});

  final TextEditingController controller;
  final String hintText;
  final TextInputType keyboardType;
  final FormFieldValidator<String> validator;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width * 0.9,
      child: TextFormField(
        controller: controller,
        validator: validator,
        decoration: InputDecoration(
          hintText: hintText,
          border: OutlineInputBorder(),
          enabledBorder: OutlineInputBorder(
            borderSide: BorderSide(color: Colors.grey.shade400, width: 1.5),
          ),
          focusedBorder: OutlineInputBorder(
            borderSide: BorderSide(color: Colors.grey, width: 2),
          ),
          focusedErrorBorder: OutlineInputBorder(
            borderSide: BorderSide(color: Colors.red.shade900, width: 2),
          ),
          errorMaxLines: 2,
        ),
        keyboardType: keyboardType,
      ),
    );
  }
}

来防止这种情况发生，但我不明白我犯了什么愚蠢的错误。我只是希望如果有人在电子邮件和密码中输入错误的值，它将显示错误，否则它将清除错误消息。

Answer 1

AutovalidateMode.onUserInteraction

替换为

autovalidateMode: AutovalidateMode.onUserInteraction

，它应该可以解决您的问题，因为您在点击登录按钮时手动触发了验证方法。