joanpablo / reactive_forms

This is a model-driven approach to handling form inputs and validations, heavily inspired in Angular's Reactive Forms
MIT License
469 stars 86 forks source link

ReactiveTextField is being cleared #412

Open nikolasduda opened 1 year ago

nikolasduda commented 1 year ago

When I insert a value into a text field like form.control('some_control').value = 'some_text'; I click on the text field, start editing the value, then the entire field is cleared What i can do to avoid this

isaacsuazo7 commented 1 year ago

Hi You can try assigning the value like this: form.control('some_control').updateValue('some_text'); Greetings.

joanpablo commented 1 year ago

Hi @OVERENSAL,

It sounds like you might have declared the FormGroup inside a Stateless Widget and each time the widget is destroyed and rebuilt you start with a fresh formGroup.

There are 3 different approaches to avoid that: 1- Use a state management library and declare the FormGroup in the State(controller, Bloc, provider, whatever the name is depending on the library you are using)

2- Use a Stateful widget and declare your formGroup in the State.

3- Use the ReactiveFormBuilder (it is a Stateful widget by itself)

nikolasduda commented 1 year ago

Thank you for attention @joanpablo I use third variant, but right now i detect that thats not working with inputFormatters I use this MaskTextInputFormatter from mask_text_input_formatter: 2.4.0 MaskTextInputFormatter( mask: '#### #### #### ####', filter: {'#': RegExp(r'[0-9]')}, ),

smallstone719 commented 1 year ago

That's correct! If I enter a value from the keyboard, there are no issues. However, when I initialize the value using formGroup.control(CompanyFieldName.phone).value = phoneMaskFormatter.maskText('1123456789'), all the characters get cleared when I press the delete button on the keyboard or start editing the value.

final phoneMaskFormatter = MaskTextInputFormatter( mask: '(###) ###-####', filter: {"#": RegExp(r'[0-9]')}, type: MaskAutoCompletionType.lazy, );

smallstone719 commented 1 year ago

My problem has been solved:

ReactiveValueListenableBuilder<String>(
          formControlName: formControlName,
          builder: (context, control, _) {
            final controlValue = control.value;
            control.value = phoneMaskFormatter.maskText(control.value ?? '');
            return ReactiveTextField<String>(
                   // Not use this
                   //inputFormatters: inputFormatters,
                   ...
            )
)