Flutter TextEditingController clear 不会重置错误信息

Question

我使用 flutter 表单 autovalidateMode: AutovalidateMode.onUserInteraction 来验证文本字段是否未填写。

如何在提交表单并再次重置文本字段时隐藏验证错误消息？

下面是我的代码来演示我的问题，填写文本字段并按提交后。 红色错误消息也会显示，这对用户体验不友好。

DartPad 链接： https://dartpad.dev/d26c3f57be04acaafae2ee127a688e3f

代码

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(),
      ),
    );
  }
}

// Create a Form widget.
class MyCustomForm extends StatefulWidget {
  @override
  MyCustomFormState createState() {
    return MyCustomFormState();
  }
}

// Create a corresponding State class.
// This class holds data related to the form.
class MyCustomFormState extends State<MyCustomForm> {
  // Create a global key that uniquely identifies the Form widget
  // and allows validation of the form.
  //
  // Note: This is a GlobalKey<FormState>,
  // not a GlobalKey<MyCustomFormState>.
  final _formKey = GlobalKey<FormState>();
  final TextEditingController taskController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    // Build a Form widget using the _formKey created above.
    return Form(
      key: _formKey,
      autovalidateMode: AutovalidateMode.onUserInteraction,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          TextFormField(
            controller: taskController,
            validator: (value) {
              if (value.isEmpty) {
                return 'Please enter some text';
              }
              return null;
            },
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 16.0),
            child: ElevatedButton(
              onPressed: () {
                // Validate returns true if the form is valid, or false
                // otherwise.
                if (_formKey.currentState.validate()) {
                  // If the form is valid, display a Snackbar and reset
                  Scaffold.of(context)
                      .showSnackBar(SnackBar(content: Text('Processing Data')));
                  taskController.clear();
                }
              },
              child: Text('Submit'),
            ),
          ),
        ],
      ),
    );
  }
}

Answer 1

我们可以使用InputDecoration来切换errorStyle并获得所需的结果。

Output：

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(),
      ),
    );
  }
}

// Create a Form widget.
class MyCustomForm extends StatefulWidget {
  @override
  MyCustomFormState createState() {
    return MyCustomFormState();
  }
}

// Create a corresponding State class.
// This class holds data related to the form.
class MyCustomFormState extends State<MyCustomForm> {
  // Create a global key that uniquely identifies the Form widget
  // and allows validation of the form.
  //
  // Note: This is a GlobalKey<FormState>,
  // not a GlobalKey<MyCustomFormState>.
  final _formKey = GlobalKey<FormState>();
  final TextEditingController taskController = TextEditingController();
  bool hideError = false;
  bool first = true;

  @override
  Widget build(BuildContext context) {
    // Build a Form widget using the _formKey created above.
    return Form(
      key: _formKey,
      autovalidateMode: AutovalidateMode.onUserInteraction,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          TextFormField(
              controller: taskController,
              decoration: hideError && !first
                  ? InputDecoration(
                      errorStyle: TextStyle(height: 0),
                      )
                  : null,
              validator: (value) {
                if (value.isEmpty) {
                  print(value);

                  return 'Please enter some text';
                }
                return null;
              },
              onChanged: (value) {
                setState(() {
                  hideError = false;
                  first = false;
                });
              }),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 16.0),
            child: ElevatedButton(
              onPressed: () {
                // Validate returns true if the form is valid, or false
                // otherwise.
                setState(() {
                  hideError = true;
                });
                if (_formKey.currentState.validate()) {
                  // If the form is valid, display a Snackbar and reset
                  
                  Scaffold.of(context)
                      .showSnackBar(SnackBar(content: Text('Processing Data')));
                  taskController.clear();
                  
                }
              },
              child: Text('Submit'),
            ),
          ),
        ],
      ),
    );
  }
}

Answer 2

如果您不想显示错误消息，那么只需删除验证器即可。

validator: (value) {
          if (value.isEmpty) {
            return 'Please enter some text';
          }
          return null;
        },

从您的代码中删除它！

Answer 3

validator: (String value) {
          if (value.isEmpty) {
            return ' ';
          }
          return null;
        },

这样做，通过返回一个空字符串，您仍然可以看到文本字段为红色。

Answer 4

TextEditingController#79405(TextEditingValue(text: ┤plantation├, selection: TextSelection(baseOffset: -1, extentOffset: -1, affinity: TextAffinity.downstream, isDirectional: false), compose: TextRange(start: -1, end: -1 )))