如何防止在填写单个字段时验证所有表单字段

时间:2021-03-05 11:01:54

标签: forms flutter


我正在设计一个表单字段来创建一个用户,我已经为这些设置了验证器,但我遇到了一个问题:当我开始填写一个字段时,所有的表单字段都被验证,因此到处都显示错误文本 (related picture)

有没有办法在其他字段未受影响时阻止它们验证?

EDIT : (很抱歉在打开话题和这次编辑之间有很长时间,我有多项工作在工作,这一项的优先级较低)

我想我知道为什么我的自动验证不起作用...当 onChange 被触发时,它会调用一个函数来检查整个表单的有效性以启用或禁用发送按钮,从而在所有表单下显示错误消息领域。如果是这样,有没有办法在不触发错误消息的情况下检查有效性?

1 个答案:

答案 0 :(得分:0)

您可以对 onTap 的验证按钮调用 _formKey.currentState.validate() 来解决此问题。喜欢,参考下面的代码。

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 Scaffold(
      appBar: AppBar(),
      body: Form(
        key: _formKey,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Container(
              height: 60.0,
              child: TextFormField(
                validator: (value) {
                  if (value.isEmpty) {
                    return 'Please enter some text';
                  }
                  return null;
                },
              ),
            ),
            Container(
              height: 60.0,
              child: TextFormField(
                validator: (value) {
                  if (value.isEmpty) {
                    return 'Please enter some text';
                  }
                  return null;
                },
              ),
            ),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 16.0),
              child: ElevatedButton(
                onPressed: () {
                  if (_formKey.currentState.validate()) {
                    ScaffoldMessenger.of(context).showSnackBar(
                        SnackBar(content: Text('Processing Data')));
                  }
                },
                child: Text('Validate'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}