Skip to content

feat: #1458 improve autovalidate modes #1460

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jan 13, 2025
Merged

feat: #1458 improve autovalidate modes #1460

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
97be5e6
test: add autovalidate mode test cases on form builder
deandreamatias Jan 6, 2025
c0427fb
test: add autovalidate mode test cases on form builder field
deandreamatias Jan 6, 2025
f15afa5
feat: show errors when auto validate mode always is set
deandreamatias Jan 7, 2025
1dbe413
test: add autovalidatemode tests
deandreamatias Jan 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions lib/src/form_builder.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import 'package:flutter/widgets.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:flutter_form_builder/src/extensions/autovalidatemode_extension.dart';

/// A container for form fields.
class FormBuilder extends StatefulWidget {
Expand Down Expand Up @@ -357,6 +358,18 @@ class FormBuilderState extends State<FormBuilder> {
});
}

@override
void initState() {
// Verify if need auto validate form
if (enabled && (widget.autovalidateMode?.isAlways ?? false)) {
WidgetsBinding.instance.addPostFrameCallback((_) {
// No focus on invalid, like default behavior on Flutter base Form
validate(focusOnInvalid: false);
});
}
super.initState();
}

@override
Widget build(BuildContext context) {
return Form(
Expand Down
11 changes: 1 addition & 10 deletions lib/src/form_builder_field.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import 'package:flutter/widgets.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:flutter_form_builder/src/extensions/autovalidatemode_extension.dart';

enum OptionsOrientation { horizontal, vertical, wrap, auto }

Expand Down Expand Up @@ -98,16 +97,13 @@ class FormBuilderFieldState<F extends FormBuilderField<T>, T>
bool get hasError => super.hasError || errorText != null;

@override
bool get isValid => super.isValid && errorText == null;
bool get isValid => super.isValid && _customErrorText == null;

bool get valueIsValid => super.isValid;
bool get valueHasError => super.hasError;

bool get enabled => widget.enabled && (_formBuilderState?.enabled ?? true);
bool get readOnly => !(_formBuilderState?.widget.skipDisabled ?? false);
bool get _isAlwaysValidate =>
widget.autovalidateMode.isAlways ||
(_formBuilderState?.widget.autovalidateMode?.isAlways ?? false);

/// Will be true if the field is dirty
///
Expand Down Expand Up @@ -140,11 +136,6 @@ class FormBuilderFieldState<F extends FormBuilderField<T>, T>
focusAttachment = effectiveFocusNode.attach(context);

// Verify if need auto validate form
if ((enabled || readOnly) && _isAlwaysValidate) {
WidgetsBinding.instance.addPostFrameCallback((_) {
validate();
});
}
}

@override
Expand Down
57 changes: 57 additions & 0 deletions test/src/form_builder_field_test.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:flutter_test/flutter_test.dart';

Expand Down Expand Up @@ -181,6 +182,21 @@ void main() {

expect(find.text(errorTextField), findsOneWidget);
});
testWidgets(
'Should not show error when init form and AutovalidateMode is disabled',
(tester) async {
const textFieldName = 'text4';
const errorTextField = 'error text field';
final testWidget = FormBuilderTextField(
name: textFieldName,
autovalidateMode: AutovalidateMode.disabled,
validator: (value) => errorTextField,
);
await tester.pumpWidget(buildTestableFieldWidget(testWidget));
await tester.pumpAndSettle();

expect(find.text(errorTextField), findsNothing);
});
testWidgets(
'Should show error when AutovalidateMode is onUserInteraction and change field',
(tester) async {
Expand All @@ -199,6 +215,47 @@ void main() {

expect(find.text(errorTextField), findsOneWidget);
});
testWidgets(
'Should show error when init form and AutovalidateMode is onUnfocus',
(tester) async {
const textFieldName = 'text4';
const errorTextField = 'error text field';
final testWidget = FormBuilderTextField(
name: textFieldName,
autovalidateMode: AutovalidateMode.onUnfocus,
validator: (value) => errorTextField,
);
final widgetFinder = find.byWidget(testWidget);

// Init form
await tester.pumpWidget(buildTestableFieldWidget(
Column(
children: [
testWidget,
ElevatedButton(onPressed: () {}, child: const Text('Submit')),
],
),
autovalidateMode: AutovalidateMode.onUnfocus,
));
await tester.pumpAndSettle();
final focusNode =
formKey.currentState?.fields[textFieldName]?.effectiveFocusNode;
expect(find.text(errorTextField), findsNothing);
expect(Focus.of(tester.element(widgetFinder)).hasFocus, false);
expect(focusNode?.hasFocus, false);

// Focus input and write text
await tester.enterText(widgetFinder, 'test');
await tester.pumpAndSettle();
expect(Focus.of(tester.element(widgetFinder)).hasFocus, true);
expect(focusNode?.hasFocus, true);
expect(find.text(errorTextField), findsNothing);

// Unfocus input and show error
await tester.sendKeyEvent(LogicalKeyboardKey.tab);
await tester.pumpAndSettle();
expect(find.text(errorTextField), findsOneWidget);
});
});
group('isDirty - ', () {
testWidgets('Should not dirty by default', (tester) async {
Expand Down
121 changes: 121 additions & 0 deletions test/src/form_builder_test.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:flutter_test/flutter_test.dart';

Expand Down Expand Up @@ -249,6 +250,126 @@ void main() {

expect(find.text(errorTextField), findsOneWidget);
});
testWidgets(
'Should not show error when init form and AutovalidateMode is disabled',
(tester) async {
const textFieldName = 'text4';
const errorTextField = 'error text field';
final testWidget = FormBuilderTextField(
name: textFieldName,
validator: (value) => errorTextField,
);
await tester.pumpWidget(buildTestableFieldWidget(
testWidget,
autovalidateMode: AutovalidateMode.disabled,
));
await tester.pumpAndSettle();

expect(find.text(errorTextField), findsNothing);
});
testWidgets(
'Should show error when init form and AutovalidateMode is onUserInteraction',
(tester) async {
const textFieldName = 'text4';
const errorTextField = 'error text field';
final testWidget = FormBuilderTextField(
name: textFieldName,
validator: (value) => errorTextField,
);
await tester.pumpWidget(buildTestableFieldWidget(
testWidget,
autovalidateMode: AutovalidateMode.onUserInteraction,
));
await tester.pumpAndSettle();

expect(find.text(errorTextField), findsNothing);

final widgetFinder = find.byWidget(testWidget);
await tester.enterText(widgetFinder, 'test');
await tester.pumpAndSettle();

expect(find.text(errorTextField), findsOneWidget);
});
testWidgets(
'Should show error when init form and AutovalidateMode is onUnfocus',
(tester) async {
const textFieldName = 'text4';
const errorTextField = 'error text field';
final testWidget = FormBuilderTextField(
name: textFieldName,
validator: (value) => errorTextField,
);
final widgetFinder = find.byWidget(testWidget);

// Init form
await tester.pumpWidget(buildTestableFieldWidget(
Column(
children: [
testWidget,
ElevatedButton(onPressed: () {}, child: const Text('Submit')),
],
),
autovalidateMode: AutovalidateMode.onUnfocus,
));
await tester.pumpAndSettle();
final focusNode =
formKey.currentState?.fields[textFieldName]?.effectiveFocusNode;
expect(find.text(errorTextField), findsNothing);
expect(Focus.of(tester.element(widgetFinder)).hasFocus, false);
expect(focusNode?.hasFocus, false);

// Focus input and write text
await tester.enterText(widgetFinder, 'test');
await tester.pumpAndSettle();
expect(Focus.of(tester.element(widgetFinder)).hasFocus, true);
expect(focusNode?.hasFocus, true);
expect(find.text(errorTextField), findsNothing);

// Unfocus input and show error
await tester.sendKeyEvent(LogicalKeyboardKey.tab);
await tester.pumpAndSettle();
expect(find.text(errorTextField), findsOneWidget);
});
group('Interact with FormBuilderField -', () {
testWidgets(
'Should show error when FormBuilder is disabled and FormBuilderField is always',
(tester) async {
const textFieldName = 'text4';
const errorTextField = 'error text field';
final testWidget = FormBuilderTextField(
name: textFieldName,
validator: (value) => errorTextField,
autovalidateMode: AutovalidateMode.always,
);
await tester.pumpWidget(buildTestableFieldWidget(
testWidget,
autovalidateMode: AutovalidateMode.disabled,
));
await tester.pumpAndSettle();

expect(find.text(errorTextField), findsOneWidget);
});
// TODO: Enable when solve issue
// https://github.com/flutter/flutter/issues/125766
// testWidgets(
// 'Should not show error when FormBuilder is always and FormBuilderField is disabled',
// (tester) async {
// const textFieldName = 'text4';
// const errorTextField = 'error text field';
// final testWidget = FormBuilderTextField(
// name: textFieldName,
// validator: (value) => errorTextField,
// autovalidateMode: AutovalidateMode.disabled,
// );
// await tester.pumpWidget(buildTestableFieldWidget(
// testWidget,
// autovalidateMode: AutovalidateMode.always,
// ));
// await tester.pumpAndSettle();

// expect(find.text(errorTextField), findsNothing);
// });
});
});

group('isDirty - ', () {
Expand Down
Loading