Enable/disable submit button and flashes

[herna]

Hi,

I am trying to enable/disable the submit button based on the form validation. I have this simple program:

import 'package:flutter/material.dart';
import 'package:reactive_forms/reactive_forms.dart';
import 'package:reactive_forms_example/sample_screen.dart';

class SubmitButtonTest extends StatefulWidget {
  @override
  State<SubmitButtonTest> createState() => _SubmitButtonTestState();
}

class _SubmitButtonTestState extends State<SubmitButtonTest> {
  FormGroup buildForm() {
    return fb.group(<String, Object>{
      'age': FormControl<double>(
        value: 50,
        asyncValidators: [MyAsyncValidator()],
      ),
    });
  }

  void submit(form) {}

  @override
  Widget build(BuildContext context) {
    return SampleScreen(
      title: const Text('Simple sample'),
      body: ReactiveFormBuilder(
        form: buildForm,
        builder: (context, form, child) {
          return Column(
            children: [
              ReactiveFormConsumer(builder: (context, form, child) {
                return FilledButton(
                  onPressed: form.valid ? () => submit(form) : null,
                  child: Text('submit'),
                );
              }),
              SizedBox(
                height: 15,
              ),
              ReactiveTextField<double>(
                formControlName: 'age',
                decoration: const InputDecoration(
                  labelText: 'Age',
                ),
              ),
            ],
          );
        },
      ),
    );
  }
}

class MyAsyncValidator extends AsyncValidator<dynamic> {
  @override
  Future<Map<String, dynamic>?> validate(AbstractControl control) async {
    return await Future.delayed(Duration(milliseconds: 250), () => null);
  }
}

The problem with this is that the submit button flashes as soon as you just type something in the input field and it's quite annoying. The expect behaviour I was looking for is not disabling the submit button while the AsyncValidator is taking place, but waiting until it ends (after 250 ms in this example) and just at that point update the state of the button. It looks like this:

What am I doing wrong?

Thanks

[vasilich6107]

seems like you have acync validator and the form is not valid until async validation finished

[vasilich6107]

After asynchronous validation begins, the form control enters a pending state. You can inspect the control's pending property and use it to give visual feedback about the ongoing validation operation.

[vasilich6107]

https://github.com/joanpablo/reactive_forms#asynchronous-validators-sunglasses

[herna]

Ok thanks, I'll tweak it accordingly.