Reactive Forms：在 flutter 中监听 ReactiveTextField 的变化？

Question

我正在使用 flutter Reactive Forms 并且我想在用户编辑文本字段时动态 enable/disable 一个按钮。我在 Reactive Forms 文档中看到他们是这样说的：

Because of the two-binding capability of the ReactiveTextField with a FormControl the widget don't include properties as controller, validator, autovalidate, onSaved, onChanged, onEditingComplete, onFieldSubmitted, the FormControl is responsible for handling validation as well as changes notifications.

如何在用户编辑文本字段时收听更改？

//Text Field
ReactiveFormConsumer(
                    builder: (ctx, form, child) => ReactiveTextField<String>(
                      formControlName: 'name',
                      controller: _nameController,
                      validationMessages: (control) => {
                        ValidationMessage.required: StringConst.namevalnotempty,
                        ValidationMessage.email: StringConst.sfs_incorrectName,
                      },                      
                      onSubmitted: () => form.valid
                          ? _btnState = eButtonState.bActive
                          : _btnState = eButtonState.bDisable,
                      onEditingComplete: () {
                        form.valid
                            ? _btnState = eButtonState.bActive
                            : _btnState = eButtonState.bDisable;
                        FocusScope.of(context).unfocus();
                      },
                      textInputAction: TextInputAction.next,
                      decoration: CommonStyle.textFieldStyle(
                          isFieldValid: form.control('name').valid),
                    ),
                  )


//Save Button
ReactiveFormConsumer(
                    builder: (context, form, child) {
                      return SizedBox(
                        height: 48,
                        width: double.infinity,
                        child: ButtonWidget(
                          eButtonState: _btnState,
                          eButtonType: eButtonType.bText,
                          btnColor: CustomColors.green600,
                          borderColor: CustomColors.green600,
                          textColor: CustomColors.mWhite,
                          text: StringConst.saveChanges,
                          onPressed: () async {
                            var name = form.value["name"].toString();
                            setState(() {
                              _btnState = eButtonState.bLoading;
                            });
                            await editUserProfile(
                              name: name,
                              userType: userType,
                            );
                          },
                        ),
                      );
                    },
                  ),

Answer 1

根据文档：

If you want to rebuild a widget each time a FormControl value changes you could use the ReactiveValueListenableBuilder widget.

ReactiveValueListenableBuilder 会监听变化。

ReactiveValueListenableBuilder<double>(
      formControlName: 'name',
      builder: (context, value, child) {
        // depending on the value enable/disable your button
      },
    ),

Answer 2

@Minjin 帮我找到了答案。我将此发布给正在寻找问题完整答案的其他人。

           ReactiveValueListenableBuilder<String>(
                    formControlName: 'name',
                    builder: (context, form, child) {
                      var name = form.value.toString();
                      var initialName = _userModel?.name?.toLowerCase();

                      // depending on the form value enable/disable your 
                      // button, check field is edited
                      if (name != "" && name.toLowerCase() != initialName) {
                        _btnState = eButtonState.bActive;
                      } else {
                        _btnState = eButtonState.bDisable;
                      }
                      
                      return SizedBox(
                        height: 48,
                        width: double.infinity,
                        child: ButtonWidget(
                          eButtonState: _btnState,
                          eButtonType: eButtonType.bText,
                          btnColor: CustomColors.green600,
                          borderColor: CustomColors.green600,
                          textColor: CustomColors.mWhite,
                          text: StringConst.saveChanges,
                          onPressed: () async {
                            
                          },
                        ),
                      );
                    },
                  )

Reactive Forms：在 flutter 中监听 ReactiveTextField 的变化？

Reactive Forms : Listen changes in ReactiveTextField in flutter?

flutter

flutter-layout

flutter-reactive-forms