[FormBuilderField]: Add "resetError" method

[dimzeta]

Is there an existing issue for this?

• I have searched the existing issues

Package/Plugin version

9.2.1

What you'd like to happen

The form is validated only when the user click on submit. At this moment, some fields are invalidate, with an error message.

I would like on remove the error message as soon as the user updates the value.

Example:

FormBuilder(
  key: _formKey,
  autovalidateMode: AutovalidateMode.disabled,
  child: Column(
    children: [
      FormBuilderTextField(
        name: 'email',
        autofillHints: const [
          AutofillHints.email,
        ],
        keyboardType: TextInputType.emailAddress,
        // * reset field error when value changes
        // * using Form Key
        onChanged: (value) => _formKey.currentState?.fields['email']?.resetError(),
        // * OR using Field Key
        onChanged: (value) => _fieldKey.currentState?.resetError(),
        validator: FormBuilderValidators.compose([
          FormBuilderValidators.required(),
          FormBuilderValidators.email(),
        ]),
      ),
    ],
  ),
);

Alternatives you've considered

No response

Aditional information

No response

[Ez3kiel-dev]

Hey @dimzeta,
I was also looking for the same thing.
Did you find a workaround for this ?

[uzuki-P]

The only thing I found that clear the _customErrorText was this validate function.

[deandreamatias]

Hi @dimzeta @Ez3kiel-dev and @uzuki-P
A conditional autovalidateMode can be implemented, which only switches to a different mode than the disabled mode

import 'package:flutter/material.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:form_builder_validators/form_builder_validators.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter FormBuilder Example',
      debugShowCheckedModeBanner: false,
      localizationsDelegates: const [
        FormBuilderLocalizations.delegate,
        ...GlobalMaterialLocalizations.delegates,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: FormBuilderLocalizations.supportedLocales,
      home: const _ExamplePage(),
    );
  }
}

class _ExamplePage extends StatefulWidget {
  const _ExamplePage();

  @override
  State<_ExamplePage> createState() => _ExamplePageState();
}

class _ExamplePageState extends State<_ExamplePage> {
  final _formKey = GlobalKey<FormBuilderState>();
  AutovalidateMode _autovalidateMode = AutovalidateMode.disabled;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Minimal code example')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: FormBuilder(
          key: _formKey,
          autovalidateMode: _autovalidateMode,
          child: Column(
            children: [
              FormBuilderTextField(
                name: 'email',
                autofillHints: const [
                  AutofillHints.email,
                ],
                keyboardType: TextInputType.emailAddress,
                validator: FormBuilderValidators.compose([
                  FormBuilderValidators.required(),
                  FormBuilderValidators.email(),
                ]),
              ),
              const SizedBox(height: 10),
              ElevatedButton(
                onPressed: () {
                  // When the form is submitted and is invalid, the autovalidate mode is set to always
                  // so then the user can see the errors and the form will be validated on every change
                  if (!_formKey.currentState!.saveAndValidate() &&
                      _autovalidateMode != AutovalidateMode.always) {
                    setState(() {
                      _autovalidateMode = AutovalidateMode.always;
                    });
                  }
                },
                child: Text('Submit'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}