Flutter表单IntlPhoneField验证被跳过问题求助

问题现象 #

• 仅填写第一个TextFormField即可提交表单，IntlPhoneField验证被跳过
• 直接点击提交按钮，仅TextFormField显示空值错误，IntlPhoneField完全不执行验证
• 仅交互过IntlPhoneField（点击输入后删除内容），其验证才会生效

解决方案 #

1. 给IntlPhoneField添加独立GlobalKey，手动触发验证

IntlPhoneField内部状态默认不会在未交互时被Form.validate()触发，通过绑定独立GlobalKey，在提交时手动调用其验证方法，确保无论是否交互过都能执行验证。

修改步骤：

• 声明IntlPhoneField的GlobalKey：

  final GlobalKey<IntlPhoneFieldState> _phoneFieldKey = GlobalKey();
  

• 给IntlPhoneField绑定该Key：

  IntlPhoneField(
    key: _phoneFieldKey, // 添加这行
    disableLengthCheck: true,
    initialCountryCode: 'MY',
    validator: (value) {
      String pattern = r'(^(?:[+0]9)?[0-9]{10,12}$)';
      RegExp regExp = RegExp(pattern);
      if (value == null || value.number.isEmpty) {
        return 'Sila masukkan nombor telefon.';
      } else if (!regExp.hasMatch(value.number)) {
        return 'Sila masukkan nombor telefon yang sah.';
      }
      return null;
    },
  ),
  

• 修改提交按钮的onPressed逻辑，先手动触发手机号字段验证，再执行表单整体验证：

  ElevatedButton(
    onPressed: () {
      // 先手动触发手机号字段的验证
      final phoneIsValid = _phoneFieldKey.currentState?.validate() ?? false;
      // 再执行表单整体验证
      final formIsValid = _formKey.currentState!.validate();
      
      if (phoneIsValid && formIsValid) {
        Navigator.of(context).pop();
      }
    },
    child: const Text('Submit'),
  ),
  

2. 优化Form的autovalidateMode（可选）

将Form的autovalidateMode设置为AutovalidateMode.onUserInteraction，这样只有用户交互过字段后才会显示错误提示，避免页面加载时就出现错误：

Form(
  key: _formKey,
  autovalidateMode: AutovalidateMode.onUserInteraction, // 添加这行
  child: Column(
    // ... 原有子组件
  ),
),

修改后的完整代码 #

import 'package:flutter/material.dart';
import 'package:intl_phone_field/intl_phone_field.dart';

class RegisterScreen extends StatefulWidget {
  const RegisterScreen({super.key});

  @override
  State<RegisterScreen> createState() => _RegisterScreenState();
}

class _RegisterScreenState extends State<RegisterScreen> {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  final GlobalKey<IntlPhoneFieldState> _phoneFieldKey = GlobalKey(); // 添加的Key
  final _phoneNumberController = TextEditingController();
  final _NameController = TextEditingController();

  @override
  void dispose() {
    super.dispose();
    _phoneNumberController.dispose();
    _NameController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 20),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              const SizedBox(height: 18),
              Center(
                child: Form(
                  key: _formKey,
                  autovalidateMode: AutovalidateMode.onUserInteraction, // 优化验证时机
                  child: Column(
                    children: [
                      const SizedBox(height: 60),
                      TextFormField(
                        controller: _NameController,
                        validator: (value) {
                          if (value == null || value.isEmpty) {
                            return "Sila isi ruangan ini.";
                          }
                          return null;
                        },
                      ),
                      const SizedBox(height: 20),
                      IntlPhoneField(
                        key: _phoneFieldKey, // 绑定Key
                        disableLengthCheck: true,
                        initialCountryCode: 'MY',
                        validator: (value) {
                          String pattern = r'(^(?:[+0]9)?[0-9]{10,12}$)';
                          RegExp regExp = RegExp(pattern);
                          if (value == null || value.number.isEmpty) {
                            return 'Sila masukkan nombor telefon.';
                          } else if (!regExp.hasMatch(value.number)) {
                            return 'Sila masukkan nombor telefon yang sah.';
                          }
                          return null;
                        },
                      ),
                      const SizedBox(height: 20),
                      ElevatedButton(
                        onPressed: () {
                          final phoneIsValid = _phoneFieldKey.currentState?.validate() ?? false;
                          final formIsValid = _formKey.currentState!.validate();
                          
                          if (phoneIsValid && formIsValid) {
                            Navigator.of(context).pop();
                          }
                        },
                        child: const Text('Submit'),
                      ),
                      const SizedBox(height: 20),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者Newbie