0

我无法将我的自定义reactive_forms控件设置为 null。当 FormGroup 在字段中没有值时，该值似乎保留在其中。但是在自定义控件生成器中，它具有该字段并表示它具有一个值。控件的绑定与表单不同步。它只发生在我在运行时将我的表单换成另一个表单之后。知道我可以检查什么吗？我已经在调试器中检查我的代码好几个小时了，很明显我在检查错误的东西。表单绝对是空的，并且控件以某种方式具有值。我可以以某种方式强行清空控件吗？form!.resetState({});不起作用。我需要这里的代码builder: (ReactiveFormFieldState<TValue, TValue> field) {在field.

自定义控件：

import 'package:flutter/material.dart';
import 'package:flutter_typeahead/flutter_typeahead.dart';
import 'package:reactive_forms/reactive_forms.dart';

import 'autocomplete_field_view_model.dart';

class AutocompleteField<
    TValue,
    TViewModel extends AutocompleteFieldViewModel<TValue, TSuggestion>,
    TSuggestion> extends ReactiveFormField<TValue, TValue> {
  AutocompleteField(
      {required String formControlName,
      required this.viewModel,
      this.onTypedCallback,
      this.context,
      this.label,
      this.form,
      this.hint,
      bool hasFocus = false,
      this.onFocusLost,
      Map<String, String> Function(AbstractControl<dynamic>)?
          validationMessages,
      this.key})
      : super(
            key: key,
            formControlName: formControlName,
            validationMessages: validationMessages,
            showErrors: (control) => control.invalid,
            builder: (ReactiveFormFieldState<TValue, TValue> field) {
              viewModel.field = field;
              viewModel.setTypeAheadText(field.value);
              viewModel.resetFieldCursor();
              return FocusScope(
                  child: Focus(
                      onFocusChange: (isFocused) {
                        hasFocus = isFocused;
                        viewModel.onFocusChange(isFocused, onFocusLost);
                        // ignore: invalid_use_of_protected_member
                        field.setState(() {});
                      },
                      child: TypeAheadFormField<TSuggestion>(
                        hideSuggestionsOnKeyboardHide: true,
                        suggestionsBoxController:
                            viewModel.suggestionsBoxController,
                        textFieldConfiguration: TextFieldConfiguration(
                          controller: viewModel.typeAheadController,
                          onChanged: (String text) {
                            if (onTypedCallback != null) {
                              onTypedCallback(text);
                            }
                            viewModel.onTyped(text);
                            viewModel.resetFieldCursor();
                          },
                          autofocus: false,
                          decoration: InputDecoration(
                              errorMaxLines: 3,
                              suffixIconConstraints: const BoxConstraints(
                                minWidth: 2,
                                minHeight: 2,
                              ),
                              suffixIcon: ReactiveStatusListenableBuilder(
                                formControlName: formControlName,
                                builder: (context, control, child) {
                                  return control.pending
                                      ? Container(
                                          width: 90,
                                          height: 60,
                                          child: Stack(children: [
                                            Positioned(
                                              top: 10,
                                              right: 15,
                                              child: CircularProgressIndicator(
                                                  backgroundColor:
                                                      Theme.of(context)
                                                          .primaryColorDark),
                                            )
                                          ]))
                                      : Container(width: 0);
                                },
                              ),
                              alignLabelWithHint: true,
                              labelStyle: TextStyle(
                                  height: 0,
                                  fontSize: hasFocus ? 24 : 18.0,
                                  color: Theme.of(context!).primaryColor),
                              hintText: hint,
                              labelText: label,
                              counterText: ''),
                        ),
                        suggestionsCallback: viewModel.suggestionsCallback,
                        suggestionsBoxDecoration:
                            viewModel.suggestionBoxDecoration(),
                        itemBuilder: viewModel.itemBuilder,
                        onSuggestionSelected: (TSuggestion suggestion) =>
                            viewModel.onSuggestionSelected(suggestion),
                      )));
            });

  TViewModel viewModel;
  final Key? key;
  final BuildContext? context;
  final String? label;
  final String? hint;
  bool? hasFocus;
  final void Function()? onFocusLost;
  final void Function(String text)? onTypedCallback;
  final FormGroup? form;

  @override
  ReactiveFormFieldState<TValue, TValue> createState() =>
      ReactiveFormFieldState<TValue, TValue>();
}
4

1 回答 1

0

添加密钥解决了这个问题。经过这么多小时后，我想在我问完这个问题后直接尝试一下。妈的，一定要记住这个……

 MyCustomComponent(
          formControlName: MenuItemFieldNames.name,
          key: Key(MenuItemFieldKeys.menuItemName), <==== this one!! (MenuItemFieldKeys.menuItemName is a String)
          viewModel: autocompleteFieldViewModel,
          label: 'Menu Item Name',
          hint: 'Menu Item Name...',
          context: context,
        ));
于 2021-06-09T09:16:53.547 回答