ReactiveValueListenableBuilder issue

[danielchan303]

Is there a builder that trigger updates when the touched status change or when the value change?

Also is there a builder that can listen to changes of two or more input at the same time, instead of nesting the builder like the following?

ReactiveValueListenableBuilder<bool>(
  formControlName: 'accept_tnc',
  builder: (context, tncControl, child) {
    return ReactiveValueListenableBuilder<bool>(
      formControlName: 'accept_privacy_policy',
      builder: (context, privacyControl, child) {
        final acceptTnc = tncControl.value ?? false;
        final acceptPrivacy =
            privacyControl.value ?? false;
        final touched = privacyControl.touched ||
            privacyControl.touched;
        print('tnc touched $touched');
        if ((!acceptTnc || !acceptPrivacy) &&
            touched) {
          return const MyText(
            text:
                "You must read and agree with the Terms and Conditions and Personal Information Collection Statement to proceed your registration.",
            textStyle: TextStyle(
              color: Colors.red,
              fontSize: 10,
            ),
          );
        } else {
          return const SizedBox();
        }
      },
    );
  },
)

[vasilich6107]

Is there a builder that trigger updates when the touched status change or when the value change?

https://pub.dev/packages/reactive_forms_lbc

[vasilich6107]

Also is there a builder that can listen to changes of two or more input

Subscribe to whole form update instead of multiple controls

[joanpablo]

Hi @danielchan303

Is there a builder that trigger updates when the touched status change or when the value change?

If you only want a builder to listen for control value changes or status changes you can simply use these widgets ReactiveValueListenableBuilder and/or ReactiveStatusListenableBuilder.

If you want a more advance builder with more complex custom logic to decide when to trigger the build you can use the ReactiveFormControlValueConsumer created as separated package as part of the Advance Reactive Form Widgets

[maranik]

Hi @vasilich6107 ,

Also is there a builder that can listen to changes of two or more input

Subscribe to whole form update instead of multiple controls

How do you translate it into a widget?

Thanks

[maranik]

Hi @joanpablo

If you want a more advance builder with more complex custom logic to decide when to trigger the build you can use the ReactiveFormControlValueConsumer created as separated package as part of the Advance Reactive Form Widgets

Ok, but it is still linked to a single form control. Doesn't it?

Listening to multiple controls is pretty common. Could defining a ReactiveValuesListenableBuilder using StreamGroup (or something similar) make sense?

Thanks

[KiddoV]

Also is there a builder that can listen to changes of two or more input at the same time

@maranik I make my own widget for that. This widget listen to one or more form control specifically...

class ReactiveMultiFieldsListenableBuilder extends StatelessWidget {
	final List<AbstractControl> controls;
	final Widget Function(BuildContext context, List<AbstractControl> values) builder;
	//
	const ReactiveMultiFieldsListenableBuilder({
		super.key,
		required this.controls,
		required this.builder
	});
	////
	@override
	Widget build(BuildContext context) {
		return buildRecursive(context, 0);
	}
	//
	Widget buildRecursive(BuildContext context, int index) {
		if (index >= controls.length) {
			return builder(context, controls);
		}
		//
		final control = controls[index];
		return StreamBuilder(
			stream: control.valueChanges,
			initialData: control.value,
			builder: (context, snapshot) {
				return buildRecursive(context, index + 1);
			},
		);
	}
}

Usage...

ReactiveMultiFieldsListenableBuilder(
    controls: [form.control("currency"), form.control("amount"), [...],
    builder: (ctx, controls) {
        final currencyCtr = controls[0] as AbstractControl<String>;
        final amountCtr = controls[1] as AbstractControl<double>;
        [...]
        // Now this will re-build everytime one of the [controls] changes...
    }
)