当用户在Flutter中输入/修复数据时，从textfield中删除错误消息

Question

我正试图建立一个与Flutter的登录页面。我使用了一个验证器来验证用户输入。我试图删除错误信息自动当用户修复他的输入。例如，如果用户输入他的电子邮件地址为:name@server(缺少.domain)并单击continue，他/她将得到一个错误，告诉用户这不是一个有效的电子邮件表单。如果用户添加了缺失的部分，.c (or more characters)错误信息应该消失，而不需要再次点击继续。这也应该用于密码字段。下面是我的代码:

class _SignFormState extends State<SignForm> {
bool _isHidden = true;
final _formKey = GlobalKey<FormState>();
void inContact(TapDownDetails details) {
setState(() {
_isHidden = false;
});
}
void outContact(TapUpDetails details) {
setState(() {
_isHidden = true;
});
}
@override
Widget build(BuildContext context) {
return Form(
key: _formKey,
child: Column(
children: [
buildEmailForm(),
SizedBox(height: getProportionateScreenHeight(20)),
buildPasswordForm(),
SizedBox(height: getProportionateScreenHeight(20)),
DefaultButton(
text: 'Continue',
press: () {
if (_formKey.currentState.validate()) {
return;
}
},
),
],
),
);
}
TextFormField buildPasswordForm() {
return TextFormField(
keyboardType: TextInputType.visiblePassword,
obscureText: _isHidden,
decoration: InputDecoration(
//labelText: 'Passowrd',
hintText: 'Password',
floatingLabelBehavior: FloatingLabelBehavior.never,
prefixIcon: Icon(
Icons.lock_sharp,
//color: kTextColor,
),
suffixIcon: Padding(
padding: EdgeInsets.symmetric(
horizontal: getProportionateScreenWidth(12),
),
child: GestureDetector(
onTapDown: inContact,
onTapUp: outContact,
child: Icon(
Icons.remove_red_eye,
size: 26,
//color: kTextColor,
),
),
),
),
);
}
TextFormField buildEmailForm() {
return TextFormField(
keyboardType: TextInputType.emailAddress,
autofocus: true,
decoration: InputDecoration(
//labelText: 'Email',
hintText: 'Enter your email',
floatingLabelBehavior: FloatingLabelBehavior.always,
prefixIcon: Icon(Icons.mail),
),
validator: (value) {
if (value.isEmpty) {
return kEmailNullError;
}
if (!emailValidatorRegExp.hasMatch(value)) {
return kInvalidEmailError;
}
return null;
},
onChanged: (value) {},
);
}
}

Answer 1

您可以使用autovalidateMode: AutovalidateMode.onUserInteraction在输入/修复数据后删除错误

TextFormField(
autovalidateMode: AutovalidateMode.onUserInteraction, // <-- add this line 
keyboardType: TextInputType.emailAddress,
autofocus: true, ...