Flutter IntlPhoneField在有效电话号码上运行函数(intl_phone_field)

kqqjbcuj  于 2023-10-22  发布在  Flutter
关注(0)|答案(3)|浏览(192)

我正在使用intl_phone_field软件包根据国家代码验证电话号码。
IntlPhoneField会自动检查无效电话号码,并分别提示一条消息。
它支持onChangeonSubmitonSaved功能,但不支持onValid功能。

我想启用/禁用提交按钮,基于包的验证功能,因为它已经支持许多国家代码和不同的电话号码长度.

Widget build(BuildContext context) {
    return IntlPhoneField(
      autofocus: true,
      decoration: const InputDecoration(
        labelText: 'Phone Number',
        border: OutlineInputBorder(),
        counterText: '',
      ),
      initialCountryCode: 'US',
      // countries: const ['US'],
    );
  }

我该怎么做?

irtuqstp

irtuqstp1#

解决了!

我通过导出Country对象检测了使用intl_phone_field包的验证,该对象包含国家代码电话号码的minLengthmaxLength
使用这些参数,我验证了onChange函数中的电话号码,以及验证电话号码时的函数。

class PhonePicker extends StatelessWidget {
  const PhonePicker({super.key});

  @override
  Widget build(BuildContext context) {
    const _initialCountryCode = 'US';
    var _country =
        countries.firstWhere((element) => element.code == _initialCountryCode);

    return IntlPhoneField(
      autofocus: true,
      decoration: const InputDecoration(
        labelText: 'Phone Number',
        border: OutlineInputBorder(),
        counterText: '',
      ),
      initialCountryCode: _initialCountryCode,
      onChanged: (value) {
        if (value.number.length >= _country.minLength &&
            value.number.length <= _country.maxLength) {
          // Run anything here
        }
      },
      onCountryChanged: (country) => _country = country,
    );
  }
}

我在GitHub项目中打开了一个pull request。

vohkndzv

vohkndzv2#

您可以使用状态变量并使用validator数据来检查number是否有效

bool isValid = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        IntlPhoneField(
          autofocus: true,
          validator: (p0) {
            /// logic to validate number
            /// isValid =true
          },
          decoration: const InputDecoration(
            labelText: 'Phone Number',
            border: OutlineInputBorder(),
            counterText: '',
          ),
          initialCountryCode: 'US',
          // countries: const ['US'],
        ),
        ElevatedButton(onPressed: isValid ? () {} : null, child: child)
      ],
    );

您还可以使用TextEditingController与监听器和检查数据和启用按钮状态。确保使用setState。

tjrkku2a

tjrkku2a3#

您可以创建一个布尔变量,然后在IntlPhoneField中使用验证器:

bool isPhoneValidated = false;

Widget build(BuildContext context) {
    return IntlPhoneField(
      autofocus: true,
      decoration: const InputDecoration(
        labelText: 'Phone Number',
        border: OutlineInputBorder(),
        counterText: '',
      ),
      validator: (value) {
        if (value!.isValidNumber()) {
           setState(() {
              isPhoneValidated = true;
           });
        } else {
           setState(() {
              isPhoneValidated = false;
           });
        }
        return null;
      },
      initialCountryCode: 'US',
      // countries: const ['US'],
    );
  }

现在,在导航之前,只需检查布尔变量是否为真。

相关问题