ReactivePhoneFormField<T> constructor

ReactivePhoneFormField<T>({
  1. Key? key,
  2. String? formControlName,
  3. FormControl<T>? formControl,
  4. Map<String, ValidationMessageFunction>? validationMessages,
  5. ControlValueAccessor<T, PhoneNumber>? valueAccessor,
  6. ShowErrorsFunction<T>? showErrors,
  7. bool shouldFormat = true,
  8. bool enabled = true,
  9. bool showFlagInInput = true,
  10. CountrySelectorNavigator countrySelectorNavigator = const CountrySelectorNavigator.searchDelegate(),
  11. dynamic onSaved(
    1. PhoneNumber?
    )?,
  12. IsoCode defaultCountry = IsoCode.US,
  13. PhoneNumber? initialValue,
  14. double flagSize = 16,
  15. InputDecoration decoration = const InputDecoration(),
  16. TextInputType keyboardType = TextInputType.phone,
  17. TextInputAction? textInputAction,
  18. TextStyle? style,
  19. StrutStyle? strutStyle,
  20. TextAlign textAlign = TextAlign.start,
  21. TextAlignVertical? textAlignVertical,
  22. bool autofocus = false,
  23. bool readOnly = false,
  24. bool? showCursor,
  25. bool obscureText = false,
  26. String obscuringCharacter = '•',
  27. bool autocorrect = true,
  28. SmartDashesType? smartDashesType,
  29. SmartQuotesType? smartQuotesType,
  30. bool enableSuggestions = true,
  31. MaxLengthEnforcement? maxLengthEnforcement,
  32. int? maxLines = 1,
  33. int? minLines,
  34. bool expands = false,
  35. int? maxLength,
  36. GestureTapCallback? onTap,
  37. VoidCallback? onEditingComplete,
  38. List<TextInputFormatter>? inputFormatters,
  39. double cursorWidth = 2.0,
  40. double? cursorHeight,
  41. Radius? cursorRadius,
  42. Color? cursorColor,
  43. Brightness? keyboardAppearance,
  44. EdgeInsets scrollPadding = const EdgeInsets.all(20.0),
  45. bool enableInteractiveSelection = true,
  46. InputCounterWidgetBuilder? buildCounter,
  47. ScrollPhysics? scrollPhysics,
  48. VoidCallback? onSubmitted,
  49. FocusNode? focusNode,
  50. Iterable<String>? autofillHints,
  51. MouseCursor? mouseCursor,
  52. DragStartBehavior dragStartBehavior = DragStartBehavior.start,
  53. AppPrivateCommandCallback? onAppPrivateCommand,
  54. String? restorationId,
  55. ScrollController? scrollController,
  56. TextSelectionControls? selectionControls,
  57. BoxHeightStyle selectionHeightStyle = ui.BoxHeightStyle.tight,
  58. BoxWidthStyle selectionWidthStyle = ui.BoxWidthStyle.tight,
  59. TextStyle? countryCodeStyle,
  60. bool enableIMEPersonalizedLearning = true,
  61. bool isCountrySelectionEnabled = true,
  62. bool isCountryChipPersistent = false,
  63. ReactiveFormFieldCallback<T>? onChanged,
})

Creates a ReactivePhoneFormField that contains a PhoneFormField.

Can optionally provide a formControl to bind this widget to a control.

Can optionally provide a formControlName to bind this ReactiveFormField to a FormControl.

Must provide one of the arguments formControl or a formControlName, but not both at the same time.

Can optionally provide a validationMessages argument to customize a message for different kinds of validation errors.

Can optionally provide a valueAccessor to set a custom value accessors. See ControlValueAccessor.

Can optionally provide a showErrors function to customize when to show validation messages. Reactive Widgets make validation messages visible when the control is INVALID and TOUCHED, this behavior can be customized in the showErrors function.

Example:

Binds a text field.

final form = fb.group({'email': Validators.required});

ReactivePhoneFormField(
  formControlName: 'email',
),

Binds a text field directly with a FormControl.

final form = fb.group({'email': Validators.required});

ReactivePhoneFormField(
  formControl: form.control('email'),
),

Customize validation messages

ReactivePhoneFormField(
  formControlName: 'email',
  validationMessages: {
    ValidationMessage.required: 'The email must not be empty',
    ValidationMessage.email: 'The email must be a valid email',
  }
),

Customize when to show up validation messages.

ReactivePhoneFormField(
  formControlName: 'email',
  showErrors: (control) => control.invalid && control.touched && control.dirty,
),

For documentation about the various parameters, see the PhoneFormField class and PhoneFormField, the constructor.

Implementation

ReactivePhoneFormField({
  Key? key,
  String? formControlName,
  FormControl<T>? formControl,
  Map<String, ValidationMessageFunction>? validationMessages,
  ControlValueAccessor<T, PhoneNumber>? valueAccessor,
  ShowErrorsFunction<T>? showErrors,

  ////////////////////////////////////////////////////////////////////////////
  bool shouldFormat = true,
  bool enabled = true,
  bool showFlagInInput = true,
  CountrySelectorNavigator countrySelectorNavigator =
      const CountrySelectorNavigator.searchDelegate(),
  Function(PhoneNumber?)? onSaved,
  IsoCode defaultCountry = IsoCode.US,
  // AutovalidateMode autovalidateMode = AutovalidateMode.onUserInteraction,
  PhoneNumber? initialValue,
  double flagSize = 16,
  InputDecoration decoration = const InputDecoration(),
  TextInputType keyboardType = TextInputType.phone,
  TextInputAction? textInputAction,
  TextStyle? style,
  StrutStyle? strutStyle,
  TextAlign textAlign = TextAlign.start,
  TextAlignVertical? textAlignVertical,
  bool autofocus = false,
  bool readOnly = false,
  bool? showCursor,
  bool obscureText = false,
  String obscuringCharacter = '•',
  bool autocorrect = true,
  SmartDashesType? smartDashesType,
  SmartQuotesType? smartQuotesType,
  bool enableSuggestions = true,
  MaxLengthEnforcement? maxLengthEnforcement,
  int? maxLines = 1,
  int? minLines,
  bool expands = false,
  int? maxLength,
  GestureTapCallback? onTap,
  VoidCallback? onEditingComplete,
  List<TextInputFormatter>? inputFormatters,
  double cursorWidth = 2.0,
  double? cursorHeight,
  Radius? cursorRadius,
  Color? cursorColor,
  Brightness? keyboardAppearance,
  EdgeInsets scrollPadding = const EdgeInsets.all(20.0),
  bool enableInteractiveSelection = true,
  InputCounterWidgetBuilder? buildCounter,
  ScrollPhysics? scrollPhysics,
  VoidCallback? onSubmitted,
  FocusNode? focusNode,
  Iterable<String>? autofillHints,
  MouseCursor? mouseCursor,
  DragStartBehavior dragStartBehavior = DragStartBehavior.start,
  AppPrivateCommandCallback? onAppPrivateCommand,
  String? restorationId,
  ScrollController? scrollController,
  TextSelectionControls? selectionControls,
  ui.BoxHeightStyle selectionHeightStyle = ui.BoxHeightStyle.tight,
  ui.BoxWidthStyle selectionWidthStyle = ui.BoxWidthStyle.tight,
  TextStyle? countryCodeStyle,
  bool enableIMEPersonalizedLearning = true,
  bool isCountrySelectionEnabled = true,
  bool isCountryChipPersistent = false,
  ReactiveFormFieldCallback<T>? onChanged,
}) : super(
        key: key,
        formControl: formControl,
        formControlName: formControlName,
        valueAccessor: valueAccessor,
        validationMessages: validationMessages,
        showErrors: showErrors,
        builder: (field) {
          final state = field as _ReactivePhoneFormFieldState<T>;
          final effectiveDecoration = decoration
              .applyDefaults(Theme.of(state.context).inputDecorationTheme);

          state._setFocusNode(focusNode);

          return PhoneFormField(
            countryCodeStyle: countryCodeStyle,
            focusNode: state.focusNode,
            controller: state._textController,
            shouldFormat: shouldFormat,
            onChanged: (value) {
              field.didChange(value);
              onChanged?.call(field.control);
            },
            autofillHints: autofillHints,
            autofocus: autofocus,
            enabled: field.control.enabled,
            showFlagInInput: showFlagInInput,
            countrySelectorNavigator: countrySelectorNavigator,
            onSaved: onSaved,
            defaultCountry: defaultCountry,
            decoration: effectiveDecoration.copyWith(
              errorText: field.errorText,
              enabled: field.control.enabled,
            ),
            cursorColor: cursorColor,
            autovalidateMode: AutovalidateMode.disabled,
            flagSize: flagSize,
            onEditingComplete: onEditingComplete,
            restorationId: restorationId,
            keyboardType: keyboardType,
            textInputAction: textInputAction,
            style: style,
            strutStyle: strutStyle,
            textAlign: textAlign,
            textAlignVertical: textAlignVertical,
            showCursor: showCursor,
            obscureText: obscureText,
            autocorrect: autocorrect,
            smartDashesType: smartDashesType ??
                (obscureText
                    ? SmartDashesType.disabled
                    : SmartDashesType.enabled),
            smartQuotesType: smartQuotesType ??
                (obscureText
                    ? SmartQuotesType.disabled
                    : SmartQuotesType.enabled),
            enableSuggestions: enableSuggestions,
            onSubmitted: onSubmitted != null ? (_) => onSubmitted() : null,
            inputFormatters: inputFormatters,
            cursorWidth: cursorWidth,
            cursorHeight: cursorHeight,
            cursorRadius: cursorRadius,
            scrollPadding: scrollPadding,
            scrollPhysics: scrollPhysics,
            keyboardAppearance: keyboardAppearance,
            enableInteractiveSelection: enableInteractiveSelection,
            mouseCursor: mouseCursor,
            obscuringCharacter: obscuringCharacter,
            onAppPrivateCommand: onAppPrivateCommand,
            scrollController: scrollController,
            selectionControls: selectionControls,
            selectionHeightStyle: selectionHeightStyle,
            selectionWidthStyle: selectionWidthStyle,
            enableIMEPersonalizedLearning: enableIMEPersonalizedLearning,
            isCountrySelectionEnabled: isCountrySelectionEnabled,
            isCountryChipPersistent: isCountryChipPersistent,
          );
        },
      );