Flutter封装独立TextField组件时表单验证失效问题解决

核心问题：Validator回调未返回结果 #

你的MandatoryFieldWidget中，TextFormField的validator属性仅调用了传入的widget.validator，但没有返回该函数的执行结果。这会导致Flutter默认认为所有字段验证通过，因此_formKey.currentState!.validate()始终返回true。

修复代码 #

修改MandatoryFieldWidget中TextFormField的validator逻辑：

validator: (String? arg) {
  // 关键：返回外部传入的validator函数的执行结果
  return widget.validator(arg!);
},

额外优化点 #

1. 处理空安全与无效Validator
   你传入的Last Name字段的validator是一个空函数(String text) {}，它会默认返回null，导致该字段永远验证通过。若无需验证，可将组件的validator参数改为可空类型，调用时直接传null：

   // 组件中修改参数类型
   Function(String?)? validator;
   
   // TextFormField的validator直接传入，无需包装
   validator: widget.validator,
   

2. 移除无意义的Controller监听
   当前onValueChange函数中的setState(() { widget.controller.text; });仅读取值，不会触发UI更新。计数器文本可直接在decoration中计算，无需监听controller，可移除initState中的监听逻辑。

3. 统一参数命名
   组件中的loginIdFocusNode命名过于局限，建议改为通用的focusNode，适配所有字段。

4. 修正计数器文本错误
   部分字段的计数器文本错误引用了其他controller（比如First Name使用了loginIdController），调用时需改为当前字段对应的controller：

   "${20 - firstNameController.text.length} characters left"
   

修复后的组件核心代码片段 #

class MandatoryFieldWidget extends StatefulWidget {
  MandatoryFieldWidget(
      this.name,
      this.controller,
      this.isEdit,
      this.onChanged,
      this.onFieldSubmit,
      this.validator,
      this.hintText,
      this.counterText,
      this.focusNode,
      this.isAstrik,
      this.idLength);

  String name;
  TextEditingController controller;
  bool isEdit;

  Function(String text) onChanged;
  Function() onFieldSubmit;
  Function(String?)? validator; // 改为可空类型
  String hintText;
  String counterText;
  FocusNode focusNode; // 统一命名
  bool isAstrik;
  int idLength;

  @override
  State<MandatoryFieldWidget> createState() => _MandatoryFieldWidgetState();
}

class _MandatoryFieldWidgetState extends State<MandatoryFieldWidget> {
  EdgeInsetsGeometry margin = const EdgeInsets.fromLTRB(10, 20, 10.0, 0.0);

  @override
  Widget build(BuildContext context) {
    return Container(
        margin: margin,
        child: Column(
          children: <Widget>[
            widget.isAstrik
                ? getMandatoryText(
                    widget.name,
                    Color.fromRGBO(102, 108, 111, 1),
                    FontWeight.normal,
                    1.0,
                    12.0,
                    1,
                    TextOverflow.ellipsis,
                    TextAlign.left)
                : labelWithoutAsterisk(
                    widget.name,
                    Color.fromRGBO(102, 108, 111, 1),
                    FontWeight.normal,
                    1.0,
                    12.0,
                    1,
                    TextOverflow.ellipsis,
                    TextAlign.left),
            TextFormField(
              maxLines: 1,
              maxLength: widget.idLength,
              controller: widget.controller,
              keyboardType: TextInputType.text,
              autofocus: widget.isEdit ? false : true,
              readOnly: widget.isEdit,
              style: AppUtils.textFieldStyle(),
              onChanged: (text) {
                widget.onChanged(text);
              },
              textInputAction: TextInputAction.next,
              focusNode: widget.focusNode,
              onFieldSubmitted: (term) {
                widget.onFieldSubmit();
              },
              validator: widget.validator, // 直接传入外部验证函数
              autovalidateMode: AutovalidateMode.onUserInteraction,
              inputFormatters: [
                FilteringTextInputFormatter.allow(RegExp("[0-9a-zA-Z -]")),
                LengthLimitingTextInputFormatter(widget.idLength),
              ],
              decoration: InputDecoration(
                  hintText: widget.hintText,
                  counterText:
                      "${widget.idLength - widget.controller.text.length} characters left",
                  counterStyle: AppUtils.counterTextStyle()),
            )
          ],
        ));
  }
}

调用时的调整示例 #

对于不需要验证的字段，直接传null作为validator参数：

MandatoryFieldWidget(
    "Last Name",
    lastNameController,
    isEdit,
    (String mOnChange) {},
    () {},
    null, // 无需验证时传null
    'Enter Last Name',
    "${20 - lastNameController.text.length} characters left",
    _lastNameFocus,
    false,
    20),

内容的提问来源于stack exchange，提问作者Nandyala Raja Pragnesh Reddy