Flutter Form Autovalidate 首次触发

Question

我在第一次启动应用程序时遇到错误，所有文本字段都在验证，但一定不是这样，我从 Flutter 文档中获取了表单示例，并添加了 autovalidate:true，在 web 上显然它可以工作但是使用物理设备和模拟器它不起作用，错误和代码如下

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   final appTitle = 'Form Validation Demo';

   return MaterialApp(
    title: appTitle,
    home: Scaffold(
     appBar: AppBar(
       title: Text(appTitle),
     ),
     body: MyCustomForm(),
   ),
  );
 }
}

class MyCustomForm extends StatefulWidget {
  @override
  MyCustomFormState createState() {
    return MyCustomFormState();
  }
}


class MyCustomFormState extends State<MyCustomForm> {

 final _formKey = GlobalKey<FormState>();

 @override
 Widget build(BuildContext context) {

  return Form(
    autovalidate:true,
    key: _formKey,
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        TextFormField(
          validator: (value) {
            if (value.isEmpty) {
              return 'Please enter some text';
            }
            return null;
          },
        ),
        Padding(
          padding: const EdgeInsets.symmetric(vertical: 16.0),
          child: RaisedButton(
            onPressed: () {                
              if (_formKey.currentState.validate()) {  
                Scaffold.of(context)
                  .showSnackBar(SnackBar(content: Text('Processing Data')));
              }
            },
            child: Text('Submit'),
          ),
        ),
      ],
    ),
  );
 }
}

Answer 1

要在第一次停止 autovalidate 我们应该使用 autovalidateMode: AutovalidateMode.onUserInteraction, 而不是 autovalidate=true。由于 autovalidate 已弃用。所以像这样使用：-

将 GlobalKey 定义为：

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

在脚手架上使用这个。

child: new Form(
              key: _formKey,
              autovalidateMode: AutovalidateMode.onUserInteraction,
              child: FormUI(),
            ),

Answer 2

您必须创建一个 autoValidate bool 变量，该变量默认为 false，因此不会显示验证消息。当用户按下提交按钮时，它将检查验证，如果无效，则将 autoValidate 变量设置为 true 并显示验证错误.一旦用户克服验证问题，它将自动验证，否则它将正常提交表单。

class MyCustomForm extends StatefulWidget {
  @override
  MyCustomFormState createState() {
    return MyCustomFormState();
  }
}


class MyCustomFormState extends State<MyCustomForm> {

  final _formKey = GlobalKey<FormState>();
  bool _autoValidate=false;
  @override
  Widget build(BuildContext context) {

    return Form(
      autovalidate:_autoValidate,
      key: _formKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          TextFormField(
            validator: (value) {
              if (value.isEmpty) {
                return 'Please enter some text';
              }
              return null;
            },
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 16.0),
            child: RaisedButton(
              onPressed: () {
                if (_formKey.currentState.validate()) {
                  Scaffold.of(context)
                      .showSnackBar(SnackBar(content: Text('Processing Data')));
                }else{
                  setState(() {
                    _autoValidate=true;
                  });
                }
              },
              child: Text('Submit'),
            ),
          ),
        ],
      ),
    );
  }
}

Answer 3

如果您想从一开始就对每个字段进行自动验证，您可以考虑这个解决方案，但它很忙，因为您必须为您拥有的每个 TextFormField 创建布尔值。

import 'package:flutter/material.dart';

class MyCustomForm extends StatefulWidget {
  @override
  MyCustomFormState createState() {
    return MyCustomFormState();
  }
}


class MyCustomFormState extends State<MyCustomForm> {

  final _formKey = GlobalKey<FormState>();
  bool _autoValidate=false;
  bool _validateFieldOne=false;

  @override
  Widget build(BuildContext context) {

    return Form(
      autovalidate:_autoValidate,
      key: _formKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          TextFormField(
            autovalidate: _autoValidate,
            validator: (value) {
              if (value.isEmpty) {
                return 'Please enter some text';
              }
              return null;
            },
            onTap: (){
              setState(() {
                _validateFieldOne=true;
              });
            },

          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 16.0),
            child: RaisedButton(
              onPressed: () {
                if (_formKey.currentState.validate()) {
                  Scaffold.of(context)
                      .showSnackBar(SnackBar(content: Text('Processing Data')));
                }else{
                  setState(() {
                    _autoValidate=true;
                  });
                }
              },
              child: Text('Submit'),
            ),
          ),
        ],
      ),
    );
  }
}

Answer 4

这里_validateFieldOne 是有状态变量，用于检查表单字段的验证状态。这样您就可以为每个表单字段使用变量。

import 'package:flutter/material.dart';

class MyCustomForm extends StatefulWidget {
  @override
  MyCustomFormState createState() {
    return MyCustomFormState();
  }
}


class MyCustomFormState extends State<MyCustomForm> {

  final _formKey = GlobalKey<FormState>();
  bool _validateFieldOne = false;

  @override
  Widget build(BuildContext context) {

    return Form(
      key: _formKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          TextFormField(
            autovalidate: _validateFieldOne,
            validator: (value) {
              if (value.isEmpty) {
                return 'Please enter some text';
              }
              return null;
            },
            onTap: (){
              setState(() {
                _validateFieldOne = true;
              });
            },

          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 16.0),
            child: RaisedButton(
              onPressed: () {
                if (_formKey.currentState.validate()) {
                  Scaffold.of(context)
                      .showSnackBar(SnackBar(content: Text('Processing Data')));
                }
              },
              child: Text('Submit'),
            ),
          ),
        ],
      ),
    );
  }
}