[FormBuilderValidators.maxLength & .minLength]: If the value to be verified is not a String but an Iterable, errorText is incorrect.

[yamashita-room-335]

Is there an existing issue for this?

• I have searched the existing issues

Package/Plugin version

9.1.0

Platforms

• Android
• iOS
• Linux
• MacOS
• Web
• Windows

Flutter doctor

Flutter doctor

[√] Flutter (Channel stable, 3.19.4, on Microsoft Windows [Version 10.0.22631.3296], locale ja-JP)
    • Flutter version 3.19.4 on channel stable at C:\src\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 68bfaea224 (2 weeks ago), 2024-03-20 15:36:31 -0700
    • Engine revision a5c24f538d
    • Dart version 3.3.2
    • DevTools version 2.31.1

[√] Windows Version (Installed version of Windows is version 10 or higher)

[√] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at C:\Users\sugur\AppData\Local\Android\sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java
    • Java version OpenJDK Runtime Environment (build 17.0.9+0--11185874)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.9.4)
    • Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
    • Visual Studio Community 2022 version 17.9.34714.143
    • Windows 10 SDK version 10.0.22000.0

[√] Android Studio (version 2023.3)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.9+0--11185874)

[√] VS Code (version 1.87.2)
    • VS Code at C:\Users\sugur\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension can be installed from:
       https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[√] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.22631.3296]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 123.0.6312.86
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 123.0.2420.65

[√] Network resources
    • All expected network resources are available.

• No issues found!

Minimal code example

Code sample

I omitted the part where the language of the application is set to another language (Japanese) because it is not essential.

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final mediaList = <String>['test1', 'test2', 'test3'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('AppBar'),
      ),
      body: Center(
        child: FormBuilderList(mediaList: mediaList),
      ),
    );
  }
}

class FormBuilderList extends StatelessWidget {
  const FormBuilderList({
    super.key,
    required this.mediaList,
  });

  final List<String> mediaList;

  @override
  Widget build(BuildContext context) {
    return FormBuilderField<List<String>>(
      name: 'name',
      validator: FormBuilderValidators.compose([
        FormBuilderValidators.maxLength(2),
        // FormBuilderValidators.minLength(4),
      ]),
      autovalidateMode: AutovalidateMode.always,
      builder: (field) {
        return InputDecorator(
          decoration: InputDecoration(
            border: InputBorder.none,
            errorText: field.errorText,
          ),
          child: SizedBox(
            height: 100,
            child: ListView.separated(
              scrollDirection: Axis.horizontal,
              itemCount: mediaList.length,
              itemBuilder: (context, index) {
                final media = mediaList[index];
                return InkWell(
                  onTap: () {
                    // call validate
                    field.didChange([...mediaList]);
                  },
                  child: SizedBox(
                      width: 100,
                      height: 100,
                      child: Image.file(File(media), key: ValueKey(index))),
                );
              },
              separatorBuilder: (context, index) => const SizedBox.shrink(),
            ),
          ),
        );
      },
    );
  }
}

Current Behavior

The string displayed during Validate is "$maxLength文字以下で入力してください。" / "$maxLength文字以上で入力してください。"

Expected Behavior

This statement is only valid if the element is a String.

If it is not a String but an Iterable, the errorText should be as follows.

"$maxLength個以下にしてください。" / "$maxLength個以上にしてください。"

Steps To Reproduce

1. Run the application with the Minimal code example and the code with the Japanese language setting process added.

2. Tap the image widget.

Aditional information

Prepare a message in the case of Iterable to each language.

https://github.com/flutter-form-builder-ecosystem/form_builder_validators/blob/9.1.0/lib/localization/intl/messages_ja.dart

Then, the errorText acquisition part should be branched to String / Iterable to ensure correct processing.

form_builder_validators/lib/src/form_builder_validators.dart

Lines 128 to 147 in 1fea112

	/// [FormFieldValidator] that requires the length of the field's value to be
	/// less than or equal to the provided maximum length.
	static FormFieldValidator<T> maxLength<T>(
	int maxLength, {
	String? errorText,
	}) {
	assert(maxLength > 0);
	return (T? valueCandidate) {
	assert(valueCandidate is String ||
	valueCandidate is Iterable ||
	valueCandidate == null);
	int valueLength = 0;
	if (valueCandidate is String) valueLength = valueCandidate.length;
	if (valueCandidate is Iterable) valueLength = valueCandidate.length;
	return null != valueCandidate && valueLength > maxLength
	? errorText ??
	FormBuilderLocalizations.current.maxLengthErrorText(maxLength)
	: null;
	};
	}

[martijn00]

@kouroku-room can you make a PR to fix this?

[Baghdady92]

Any Updates ?