FormBuilderState.isValid is false even though the form is valid
#1157
Comments
|
In this cases the better way to avoid external errors, is build minimal example to reproduce the issue. |
|
Here's the simplest app that fails. It's a web app. Peek.2022-11-29.12-47.mp4As you can see, even though I put The validity text, however, changes when I put |
|
The strange thing is, a plain function validator works as I expected, see this: FormBuilderTextField(
name: 'email',
decoration: const InputDecoration(
labelText: '[email protected]',
border: OutlineInputBorder(),
),
// instead of FormBuilderValidators.email, a plain function is here
validator: (value) {
// if the input is empty
if (value == null) {
return 'Field is required';
}
// if the input is not empty
// store these conditions in a list of bools
final conditions = [
value.contains('@'), // input has `@`
value.contains('.'), // input has a dot
!value.startsWith('@'), // input does not start with `@`
!value.startsWith('.'), // input does not start with a dot
!value.endsWith('@'), // input does not end with `@`
!value.endsWith('.'), // input does not end with a dot
];
// if any one of these conditions are false
if (!conditions.every((element) => element)) {
return 'Email is invalid.';
}
// if all conditions are true
return null;
},
),So, this might be a bug in |
|
Not only |
|
I confirmed this email regex pattern has no problem. Also considering Also, This rabbit hole goes deeper baby. For now, I will stick to plain function validators in my app until we can figure this out. |
|
Should try run minLength validators tests with your password. |
|
Sure thing, I can even provide the code directly. This uses import 'package:flutter/material.dart';
import 'package:flutter_form_builder/flutter_form_builder.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 Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: FormPage(),
);
}
}
class FormPage extends StatefulWidget {
final _formKey = GlobalKey<FormBuilderState>();
FormPage({super.key});
@override
State<FormPage> createState() => _FormPageState();
}
class _FormPageState extends State<FormPage> {
bool? isValid;
@override
Widget build(BuildContext context) {
return FormBuilder(
key: widget._formKey,
autovalidateMode: AutovalidateMode.always,
onChanged: () {
// rebuild when form changes
isValid = widget._formKey.currentState?.isValid;
setState(() {});
},
child: Scaffold(
body: Padding(
padding: const EdgeInsets.all(16),
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
// UI BELOW //
children: [
FormBuilderTextField(
name: 'email',
decoration: const InputDecoration(
border: OutlineInputBorder(),
),
validator: FormBuilderValidators.compose([
FormBuilderValidators.required(),
FormBuilderValidators.email(),
]),
),
const SizedBox(height: 16),
Text(
isValid == null
? 'initial state'
: isValid!
? 'valid'
: 'invalid',
),
// UI ABOVE //
],
),
),
),
),
);
}
}If you input However, the second you put a new character, let's say The value of |
|
We need solve if this issue is from validator or from logic of |
|
Hello, @erayerdin I encountered the same issue in my example and the only workaround I found for this issue is that you should wrap So the onChanged callback in your FormBuilder should look like this: onChanged: () {
// rebuild when form changes
WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
isValid = widget._formKey.currentState?.isValid;
setState(() {});
});
}, |
|
You're a lifesaver @icelija. Unfortunately, I'm not dealing with this thing right now, let's wait for someone else to validate it works for them. Other than that, the main problem I think is I can get why it is the way it is though. When you develop a third-party package, it's better to depend on the standard library rather than another third-party one. The way it works also has caused me headaches in #1162. |
|
I'm working on this bug on branch |
|
Can test this on pre-release 9.0.0-dev.1 |
Environment
Package version: 7.7.0
Flutter doctor
Code sample
Description
Expected behavior:
_formKey.currentState.isValidshould return true when all the fields in the form are valid.Current behavior: It does not return true.
Steps to reproduce
_formKey.currentState.isValidis false.Images
Stacktrace/Logcat
The text was updated successfully, but these errors were encountered: