How to reset error message in TextFormField? - flutter

Question

I know this is a simple question but i did not find how to do this. How can i reset error message in TextFormField when the user input something in the field. Something like onchange listener. I notice onChanged is available in TextField but not TextFormField. How can i do this?
final _email = Container(
child: TextFormField(
decoration: InputDecoration(labelText: email),
keyboardType: TextInputType.emailAddress,
controller: emailController,
validator: _validateEmail,
onSaved: (input) => _stringEmail = input.toLowerCase().trim(),
),
);
UPDATE: I am using controller to add listener for user input. But i just want to reset the error message instead of validating the form again. Is this possible? How can i do this?
_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

You can use auto-validation feature of Form
If you looking for this solution,
"As soon as you type it validates your input and show/hide error"
Flutter provides auto-validation feature, you just need to enable it at form level.
Default
_autoValidate = false;
Form
body: Form( key: _formKey,
autovalidate: _autoValidate,....)
Enable it when user presses submit once,
if (_formKey.currentState.validate()) {
// All Good
} else {
// start auto validate
setState(() {
_autoValidate = true;
});
}
Update :-
Now Form.autovalidate is deprecated. So Use
Form.autovalidateMode = AutovalidateMode.onUserInteraction

Answer 2

Form.autovalidate has been deprecated. Use Form.autovalidateMode = AutovalidateMode.onUserInteraction to have the errors automatically clear once a user begins to interact with the form field again without having to manage any state yourself.

Answer 3

The TextFormField also has the option of onChanged in that you can try to reset the form validation through the 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

// 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 5

I would suggest to use the controller and listen to the User input . and whenever he types something you can validate() your form again

Answer 6

I don't see any answers to your question. I also ran into a situation like this I wanted the fields of the authentication form to reset their validation error once the user changes to Login or Signup. So I added this logic:
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.
Edit:
So basically you just force pass null on all your field validators to clear the message. Alternatively as Yogesh pointed out you can achieve this by simply _formKey.currentState.reset();
But if you need more granular control, this method serves you good since you can set if (_formFlipped) return null; or similar condition to different fields according to your need.

Answer 7

This one worked form. You can try to validate form like this:
_formKey.currentState.validate()
You need to define validate field in your TextFormField.