The package I'm using is ReactiveForms

I have three decorations for the InputDecoration. If I use enabledBorder property, it will always keep that border style even out of focus from that input field. I have a faded border style which I assigned to the border property. and I need to update that style after the input is selected and given a valid input and moved out of focus.

the code looks as below

ReactiveTextField<String>(
                        onSubmitted: () => form.focus('full_name'),
                        autofocus: false,
                        formControlName: 'full_name',
                        onEditingComplete: () {
                        },
                        validationMessages: (control) => {
                          ValidationMessage.required:
                              StringConst.signupFormFullNameValidate,
                        },
                        textInputAction: TextInputAction.next,
                        decoration: InputDecoration(
                          errorMaxLines: 2,
                          border:
                              cInitialBorder, //form.control('full_name').valid ? cEnabledBorder : cInitialBorder,
                          focusedBorder: cFocusedBorder,
                          errorBorder: cErrorBorder,
                          focusedErrorBorder: cFocusedErrorBorder,
                          labelText: StringConst.fullName,
                          labelStyle: tBody3,
                          floatingLabelStyle: tFloatLabel,
                          errorStyle: tError.copyWith(
                            overflow: TextOverflow.clip,
                          ),
                        ),
                      ) 

What I need to achieve is that. When the input field is not selected, the style should be cInitialBorder. If the input field is selected and the input value is validated then the style should be cEnabledBorder. But now when I move the focus from that input to another, the border changes style back to cInitialBorder. I need to keep the cEnabledBorder style when there is a valid input and also that input field is out of focus. how can I achieve that. I tried getting the valid property of the input field but it didn't work.

Can anyone help me with this ?

CodePudding user response：

I think you should wrap ReactiveTextField with ReactiveFormConsumer which searches for the nearest parent and observe its formGroup.

ReactiveFormConsumer(
     builder: (ctx,form,child)=>ReactiveTextField<String>(
                    onSubmitted: () => form.focus('full_name'),
                    autofocus: false,
                    formControlName: 'full_name',
                    onEditingComplete: () {
                    },
                    validationMessages: (control) => {
                      ValidationMessage.required:
                          StringConst.signupFormFullNameValidate,
                    },
                    textInputAction: TextInputAction.next,
                    decoration: InputDecoration(
                      errorMaxLines: 2,
                      border: form.control('full_name').valid ? cEnabledBorder : cInitialBorder,
                      focusedBorder: cFocusedBorder,
                      errorBorder: cErrorBorder,
                      focusedErrorBorder: cFocusedErrorBorder,
                      labelText: StringConst.fullName,
                      labelStyle: tBody3,
                      floatingLabelStyle: tFloatLabel,
                      errorStyle: tError.copyWith(
                        overflow: TextOverflow.clip,
                      ),
                    ),
                  ) 
)