如何清除Flutter中TextFormField中的错误消息 [英] How to clear error message in TextFormField in Flutter

问题描述

在我的代码中，我验证电话号码.如果电话号码不正确-我会显示错误消息.但是，当用户开始编辑号码时，我想隐藏此错误消息.

In my code I validate phone number. If phone number is incorrect - I show error message. But, when user starts to edit number I want to hide this error message.

我找到了currentState.reset()的解决方案，但这似乎不是一个好方法.我必须处理保存文本和光标位置的问题.而且我还有一个小神器.通常，当我按住退格键时，它会一一删除符号.如果在显示错误消息时执行此操作-错误消息消失并且仅删除一个符号.

I've found the solution with currentState.reset(), but it seems not the good one. I have to handle issues with saving text and cursor position. And I still have one small artifact. Normally when I press and hold backspace - it deletes symbols one by one. If I do it when error message is shown - then error message disappears and only one symbol is deleted.

有人知道这种情况的正确解决方案吗?

Does anybody know the right solution for this case?

final TextEditingController controller = TextEditingController();
final RegExp _phoneRegex = RegExp(r"^\+{1}\d{10, 15}\$");
bool isError = false;
TextSelection currentPosition;

return Column(
  children: <Widget>[
    Form(
        key: _textKey,
        child: TextFormField(
          controller: controller,
          validator: (str) {
            isError = true;
            if (str.isEmpty) {
              return err_empty_field;
            } else if (!_phoneRegex.hasMatch(str)) {
              return err_invalid_phone;
            }
            isError = false;
          },
        ),
        onChanged: () {
          if (controller.selection.start < 0 &&
              controller.text.length > 0) {
            TextSelection position =
                controller.text.length > currentPosition.start
                    ? currentPosition
                    : TextSelection.fromPosition(
                        TextPosition(offset: controller.text.length));
            controller.selection = position;
          }
          if (isError) {
            isError = false;
            currentPosition = controller.selection;
            if (currentPosition.start > controller.text.length) {
              currentPosition = TextSelection.fromPosition(
                  TextPosition(offset: controller.text.length));
            }
            String currentText = controller.text;
            _textKey.currentState.reset();
            controller.text = currentText;
            controller.selection = currentPosition;
          }
        },
      ),
    RaisedButton(
      onPressed: () {
        _textKey.currentState.validate();
      },
      child: Text(login),
    )
  ],
);

推荐答案

我发现了可行且更简单的方法

I've found working and easier way

final _textKey = GlobalKey<FormState>();
final TextEditingController _controller = TextEditingController();

Widget _getPhoneInputForm() {
  final RegExp _phoneRegex = RegExp(r"^\+{1}\d{10,17}");
  bool isError = false;
  bool isButtonPressed = false;

  return Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    mainAxisSize: MainAxisSize.max,
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Padding(
        padding: EdgeInsets.symmetric(horizontal: 36.0),
        child: Form(
          key: _textKey,
          child: TextFormField(
            keyboardType: TextInputType.phone,
            decoration: InputDecoration(
                hintText: hint_enter_phone,
                contentPadding: EdgeInsets.all(24.0),
                fillColor: Colors.blueGrey.withOpacity(0.3),
                filled: true,
                border: OutlineInputBorder(
                    borderRadius: BorderRadius.all(Radius.circular(16.0)),
                    borderSide: BorderSide(color: Colors.blueGrey))),
            controller: _controller,
            validator: (str) {
              if (!isButtonPressed) {
                return null;
              }
              isError = true;
              if (str.isEmpty) {
                return err_empty_field;
              } else if (!_phoneRegex.hasMatch(str)) {
                return err_invalid_phone;
              }
              isError = false;
            },
            onFieldSubmitted: (str) {
              if (_textKey.currentState.validate()) _phoneLogin();
            },
          ),
          onChanged: () {
            isButtonPressed = false;
            if (isError) {
              _textKey.currentState.validate();
            }
          },
        ),
      ),
      RaisedButton(
        color: Colors.teal,
        textColor: Colors.white,
        onPressed: () {
          isButtonPressed = true;
          if (_textKey.currentState.validate()) _phoneLogin();
        },
        child: Text(login),
      )
    ],
  );
}

这篇关于如何清除Flutter中TextFormField中的错误消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！