Listen for Validation Errors....

[JulianSwales]

I have the following:

Align(
                alignment: Alignment.centerLeft,
                child: ReactiveStatusListenableBuilder(
                    key: Key('FieldC'),
                    formControlName: 'yesno',
                    builder: (_, control, __) {
                      return InputDecorator(
                        decoration: InputDecoration(
                          border: InputBorder.none,
                          errorText:  control.invalid
                              ? 'Required'
                              : null,
                        ),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            HtmlWidget(
                             'Question #1,
                              textStyle: const TextStyle(height: 1.5),
                            ),
                            const SizedBox(
                              width: 10,
                            ),
                            Row(
                              children: [
                                ReactiveRadio(
                                  key: Key('YField'),
                                  formControlName: 'yesno',
                                  value: true,
                                ),
                                const Text('Yes'),
                                ReactiveRadio(
                                  key: Key('NField'),
                                  formControlName: 'yesno',
                                  value: false,
                                ),
                                const Text('No'),
                              ],
                            ),
                          ],
                        ),
                      );
                    }),
              )

I have this setup because I start with the value as null with neither control set since we require them to actively select either the yes or no.. However with the control.invalid it shows the error on load.. I'd like it to not show the error until the Submit button is pressed where I run form.markAllAsTouched(); if form isn't valid.. I haven't found a control values combination that will do this. Any suggestions on how to accomplish this? BTW this is a great plugin. Thanks for all your hard work on it.. Julian..

[vasilich6107]

Check this example how to work with errors https://github.com/joanpablo/reactive_forms/blob/master/lib/src/widgets/reactive_text_field.dart#L161

[joanpablo]

Hi @JulianSwales

If a FormControl is require and it's value is null then it is invalid. The Reactive Widgets will show validation messages when it is invalid and touched (default behavior) but you can change that behavior. In this documentation you can read about how to change that behavior.

Please let us know if you have more questions.

[JulianSwales]

Thank you both for your responses.. The ReactiveRadio does not have the showErrors: option, and I was hoping to not have to write a widget for this, so wrapping those two into a ReactiveStatusListenableBuilder seemed like it should work.. And it does to a point.. The control.invalid works, in that it shows the invalid message.. However I'd like it to show it only after the controls have been touched.. So I added the control.touched && control.invalid. This also works in that it shows no error on initial load.. However when I click the button that runs the markAllAsTouched no change occurs to the view. However if I then just hit save on the code window after touching the button and the Flutter reload runs, then the control.touched is valid and the error shows.. I've worked around this by using a touchChanges.listen for each control I need to monitor for this and using a showError state of my own. Again thanks for this great package.. Julian