我的表单键没有在颤振中验证,即使在我将它用作表单中的键并输入合适的值之后

Posted

技术标签:

【中文标题】我的表单键没有在颤振中验证,即使在我将它用作表单中的键并输入合适的值之后【英文标题】:My form key is not validating in flutter, even after i used it as key in form and entering suitable values 【发布时间】:2021-06-21 07:07:40 【问题描述】:

好的,我看到有关此错误的帖子,但我无法弄清楚为什么我的 _formKey 没有验证。我在Formkey 参数中使用了它,但它仍然没有验证。

我是怎么弄明白的?我只是在函数中使用了一个 if 语句,它位于给定代码的最后(即第 142 行)。我用过-

if(_formKey.currentState!.validate())
    print("Yes");

我没有得到任何输出。所以请有人告诉我我在哪里漏掉了一点。我在下面写下行号,这可能会有所帮助并节省一些时间-

行号- 24、51、74、82、94、100、142。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:email_validator/email_validator.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_instagram_clone_final/Screens/signup/cubit/signup_cubit.dart';
import 'package:flutter_instagram_clone_final/repositories/auth/auth_repository.dart';

class SignupScreen extends StatelessWidget 

  static const String routeName = '/signup';

  static Route route() 
    return MaterialPageRoute(
      settings: const RouteSettings(
        name: routeName,
      ),
      builder: (context) => BlocProvider<SignupCubit>(
        create: (_) => SignupCubit(authRepository: context.read<AuthRepository>()),
        child: SignupScreen(),
      ),
    );
  

  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) 
    return WillPopScope(
      onWillPop: () async => false,
      child: GestureDetector(
        onTap: () => FocusScope.of(context).unfocus(),
        child: BlocConsumer<SignupCubit, SignupState>(
            listener: (context, state) 
              if(state.status==SignupStatus.error)
                showDialog(context: context, builder: (context) => AlertDialog(
                  title: Text('Error'),
                  content: Text(state.failure.message),),
                );
            ,
            builder: (context, state) 
              return Scaffold(
                resizeToAvoidBottomInset: false,
                body: Center(
                  child: Padding(
                    padding: const EdgeInsets.all(24.0),
                    child: Card(
                      color: Colors.white,
                      child: Padding(
                        padding: const EdgeInsets.all(24.0),
                        child: Form(
                          key: _formKey,
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            crossAxisAlignment: CrossAxisAlignment.stretch,
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              Text(
                                'Instagram',
                                style: TextStyle(
                                  fontSize: MediaQuery.of(context).size.width*0.075,
                                  fontWeight: FontWeight.bold,
                                ),
                                textAlign: TextAlign.center,
                              ),
                              const SizedBox(
                                height: 12.0,
                              ),
                              TextFormField(
                                autovalidateMode: AutovalidateMode.always,
                                decoration: InputDecoration(
                                  hintText: "Enter the username",
                                ),
                                onChanged: (value) => context.read<SignupCubit>().usernameChanged(value),
                                validator: (value) => value!.trim().isNotEmpty ? "" : 'Please enter a valid email',
                              ),
                              TextFormField(
                                autovalidateMode: AutovalidateMode.always,
                                decoration: InputDecoration(
                                  hintText: "Enter the email",
                                ),
                                onChanged: (value) => context.read<SignupCubit>().emailChanged(value),
                                validator: (value) => EmailValidator.validate(value??"") ? "" : 'Please enter a valid email',
                              ),
                              const SizedBox(
                                height: 12.0,
                              ),
                              TextFormField(
                                obscureText: true,
                                autovalidateMode: AutovalidateMode.always,
                                decoration: InputDecoration(
                                  hintText: "Enter the password",
                                ),
                                onChanged: (value) => context.read<SignupCubit>().passwordChanged(value),
                                validator: (value) => value!.length<6 ? "Must be at least 6 characters" : '',
                              ),
                              const SizedBox(
                                height: 20.0,
                              ),
                              ElevatedButton(
                                onPressed: () => _submitForm(context, state.status==SignupStatus.submitting),
                                style: ElevatedButton.styleFrom(
                                  primary: Theme.of(context).primaryColor,
                                  elevation: 1.0,
                                  textStyle: TextStyle(
                                    color: Colors.white,
                                  ),
                                ),
                                child: Text(
                                    'Sign Up',
                                ),
                              ),
                              const SizedBox(
                                height: 12.0,
                              ),
                              ElevatedButton(
                                onPressed: () => Navigator.of(context).pop(),
                                style: ElevatedButton.styleFrom(
                                  primary: Colors.grey[200],
                                  elevation: 1.0,
                                ),
                                child: Text(
                                  'Already have an account? Log In',
                                  style: TextStyle(
                                    color: Colors.black,
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              );
            
        ),
      ),
    );
  

  void _submitForm(BuildContext context, bool isSubmitting) 
    print('$_formKey.currentState $isSubmitting');
    if(_formKey.currentState!.validate() && !isSubmitting)
      context.read<SignupCubit>().signupWithCredentials();
  

附: :我输入电子邮件、密码和用户名分别为 - s@s.com、123456、Sf 作为示例。所以我认为我输入的值是正确的,还有一些其他的问题。

【问题讨论】:

【参考方案1】:

在验证器回调中,您必须在验证有效时返回 null,这是因为验证不起作用

TextFormField(
      obscureText: true,
      autovalidateMode: AutovalidateMode.always,
      decoration: InputDecoration(
        hintText: "Enter the password",
      ),
      onChanged: (value) => context.read<SignupCubit>().passwordChanged(value),
      // Return null in validator when the validation is ok
      validator: (value) =>
          value!.length < 6 ? "Must be at least 6 characters" : null,
    )

如果返回null,则validator将返回true并调用print

【讨论】:

你的意思是,我应该在 submitform 函数的 if 语句中返回 null? 谢谢兄弟的回答。

以上是关于我的表单键没有在颤振中验证,即使在我将它用作表单中的键并输入合适的值之后的主要内容,如果未能解决你的问题,请参考以下文章

AngularJS 自定义表单验证指令在我的模式中不起作用

如果 body:Form 没有在颤振应用程序中使用,我的表单数据没有被提交或保存

在我将它用作 Xcode 中的应用程序图标之前,如何检查图标是不是具有透明度

将错误注入已验证的表单?

如何在提交表单之前验证电子邮件字段不为空

表单的新实例覆盖现有表单变量声明