feat nested_form_builder.dart add NestedFormBuilder;

[Hu-Wentao]

Add NestedFormBuilder and some example code

resolve issue #239 and #1117

{
  "foo": "foo value0",
  "inner": {
    "bar": "bar value1",
    "baz": "baz value2",
  }
}

   FormBuilder(
            key: formKey,
            initialValue: const {
              'foo': 'foo value0',
              'inner': {
                'bar': 'bar value1',
                'baz': 'baz value2',
              }
            },
            child: Column(
              children: [
                FormBuilderTextField(name: 'foo'),
                Padding(
                  padding: const EdgeInsets.only(left: 16.0),
                  child: NestedFormBuilder(
                      name: 'inner',
                      child: Column(
                        children: [
                          FormBuilderTextField(name: 'bar'),
                          FormBuilderTextField(name: 'baz'),
                        ],
                      )),
                )
              ],
            )),

[codecov]

Codecov Report

Attention: Patch coverage is 0% with 23 lines in your changes missing coverage. Please review.

Project coverage is 82.22%. Comparing base (76be651) to head (e4d1d45).
Report is 346 commits behind head on main.

Files with missing lines	Patch %	Lines
lib/src/nested_form_builder.dart	0.00%	23 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1156      +/-   ##
==========================================
- Coverage   84.93%   82.22%   -2.72%     
==========================================
  Files          19       20       +1     
  Lines         697      720      +23     
==========================================
  Hits          592      592              
- Misses        105      128      +23     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[ozayr]

I just came to issues looking for a way to nest forms, appreciate this!

[deandreamatias]

3 more things to review:

• Revert pubspec.lock changes
• Add tests (can be minimal) to NestedFromBuilder
• Add how use nested builder to README.md

[deandreamatias]

Please replace this line with language config, like this:

      supportedLocales: [
        Locale('de'),
        Locale('en'),
        Locale('es'),
        Locale('fr'),
        Locale('it'),
        ...
      ],

[deandreamatias]

Thanks a lot for this contribution! Will be a big step foward to improve this package.
Because this is a new important feature, required some changes to can be stable and easy to use for all

[k-ane]

Hi, I have been testing this new feature (it's awesome btw, thanks for the PR) and I was wondering how validation will work? For me right now, validating the parent/main form didn't trigger validation on the nested/child fields.

[k-ane]

I got the nested form validation to work for me by adding a validator to the FormBuilderField of NestedFormBuilder, like so:

@override
  Widget build(BuildContext context) => FormBuilderField<Map<String, dynamic>>(
        name: name,
        initialValue:
            parentFormKey?.currentState?.initialValue[name] ?? initialValue,
        valueTransformer: valueTransformer ?? (_) => _,
        onReset: () => formKey.currentState?.reset(),
        // Added validator here
        validator: (_) =>
            (formKey.currentState?.validate() ?? false) ? null : '',
        builder: (field) => FormBuilder(
          key: formKey,
          initialValue: field.value ?? {},
          onChanged: () {
            final st = formKey.currentState;
            if (st == null) return;
            st.save();
            field.didChange(valueTransformer?.call(st.value) ?? st.value);
          },
          autovalidateMode: autovalidateMode,
          onWillPop: onWillPop,
          skipDisabled: skipDisabled,
          enabled: enabled,
          autoFocusOnValidationFailure: autoFocusOnValidationFailure,
          clearValueOnUnregister: clearValueOnUnregister,
          child: child,
        ),
      );

[k-ane]

Something else worth noting, I had to add

autovalidateMode: autovalidateMode,

just below the new validator, otherwise the nested form was validating on every change. Previously the autovalidateMode was only being passed to the FormBuilder and not the FormBuilderField component

[mfizz1]

Any update on this? This is such a game changer that is desperately needed.

[letto4135]

Ready for nested forms 👍

[Arpit1496]

any update on this ?

[UsamaKarim]

It doesn't seem to solve all use cases, for example, if I have a nested list,

{
  "foo": "foo value0",
  "inner": [
    {
      "bar": "bar value1",
      "baz": "baz value2"
    },
    {
      "bar": "bar value1",
      "baz": "baz value2"
    }
  ]
}