如何清除Flutter中TextFormField的错误信息

kt06eoxx  于 2023-02-05  发布在  Flutter
关注(0)|答案(9)|浏览(311)

在我的代码我验证电话号码。如果电话号码是不正确的-我显示错误消息。但是,当用户开始编辑号码,我想隐藏这个错误消息。
我已经找到了currentState.reset()的解决方案,但它似乎不是一个好的。我必须处理保存文本和光标位置的问题。我仍然有一个小工件。通常当我按下并按住backspace -它会一个接一个地删除符号。如果我这样做时,错误消息显示-然后错误消息消失,只有一个符号被删除。
有人知道这个案子的正确解决方案吗?

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),
    )
  ],
);
bqjvbblv

bqjvbblv1#

编辑(2020年11月)

autovalidate在v1.19.0之后已弃用。
请改用autovalidateMode

Form(
  autovalidateMode: AutovalidateMode.onUserInteraction`.
  ...
)

原始帖子

这里有一个解决这个问题合适方案。
实际上,您不需要使用onChanged或任何引起副作用的提示,我通过创建一个初始化为false的类属性来解决这个问题:

bool _autovalidate = false;

表单小部件有一个命名属性autovalidate。您应该向其传递前面的布尔值:

Form(
  key: _textKey,
  autovalidate: _autovalidate,
  ... 
)

在Submit按钮onPressed()方法中,如果表单是invalid,则应该将_autovalidate布尔值更新为true,这将使表单在每次onChanged调用时自动验证TextFormField:

RaisedButton(
  onPressed: () {
    if (_textKey.currentState.validate()) {
      print('valid');
    } else {
      print('invalid');
      setState(() => _autoValidate = true);
    }
  },
  child: Text(login),
)

希望能帮到什么人。

vfhzx4xs

vfhzx4xs2#

2021年1月

...

AutovalidateMode _autoValidate = AutovalidateMode.disabled;
Form(
  key: _textKey,
  autovalidateMode: _autovalidate,
  ... 
)
RaisedButton(
  onPressed: () {
    if (_textKey.currentState.validate()) {
      print('valid');
    } else {
      print('invalid');
      setState(() => _autoValidate = AutovalidateMode.always);
    }
  },
  child: Text("login"),
)
jvlzgdj9

jvlzgdj93#

这里的问题是errorText是由TextFormFieldvalidator字段自动管理的,同时,简单的解决方案是手动处理errorText

    • 步骤1:**创建
  • 字符串字段_errorText初始化为null。该字段将保存需要显示的错误消息。
  • 布尔字段_error初始化为false。如果有错误,则字段为true,否则为false
    • 步骤2:**
  • _errorText分配给TextFormField
    • 步骤3(重要):**
  • 确保TextFormFieldvalidator返回一个null值。
  • 在这里处理验证,并将正确的错误消息分配给_errorText
  • 相应更新_error状态。
    • 步骤4(重要):**
  • 重置_errorText_error。这将在您开始编辑时从字段中删 debugging 误。
    • 步骤5:**
  • 触发onFieldSubmitted中的字段验证并管理您的代码流...
import 'package:flutter/material.dart';

class WorkGround extends StatefulWidget {
  @override
  _WorkGroundState createState() => _WorkGroundState();
}

class _WorkGroundState extends State<WorkGround> {
  final _formKey = GlobalKey<FormState>();
  final _usernameFocusNode = FocusNode();
  final _phoneNumberFocusNode = FocusNode();

  /*
  * Step 1.
  * */
  String _userNameErrorText;
  bool _userNameError = false;
  String _phoneNumberErrorText;
  bool _phoneNumberError = false;

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            TextFormField(
              focusNode: _usernameFocusNode,
              decoration: InputDecoration(
                labelText: 'Username',
                /*
                * Step 2
                * */
                errorText: _userNameErrorText, // Handling error manually
              ),
              textInputAction: TextInputAction.next,
              /*
              * Step 3
              * */
              validator: (value) {
                setState(() {
                  if(value.isEmpty) {
                    _userNameError = true;
                    _userNameErrorText = 'Enter Username';
                  }
                });
                return null; // Return null to handle error manually.
              },
              /*
              * Step 4
              * */
              onChanged: (value) {
                setState(() {
                  _userNameError = false;
                  _userNameErrorText = null; // Resets the error
                });
              },
              /*
              * Step 5
              * */
              onFieldSubmitted: (value) {
                _formKey.currentState.validate(); // Trigger validation
                if(!_userNameError) {
                  FocusScope.of(context).requestFocus(_phoneNumberFocusNode);
                }
              },
            ),
            TextFormField(
              focusNode: _phoneNumberFocusNode,
              decoration: InputDecoration(
                labelText: 'Phone Number',
                /*
                * Step 2
                * */
                errorText: _phoneNumberErrorText, // Handling error manually
              ),
              textInputAction: TextInputAction.done,
              /*
              * Step 3
              * */
              validator: (value) {
                setState(() {
                  if(value.isEmpty) {
                    _phoneNumberError = true;
                    _phoneNumberErrorText = 'Enter Phone number';
                  } else if( value.length < 10) {
                    _phoneNumberError = true;
                    _phoneNumberErrorText = 'Invalid Phone number';
                  }
                });
                return null; // Return null to handle error manually.
              },
              /*
              * Step 4
              * */
              onChanged: (value) {
                setState(() {
                  _phoneNumberError = false;
                  _phoneNumberErrorText = null; // Resets the error
                });
              },
              /*
              * Step 5
              * */
              onFieldSubmitted: (value) {
                _formKey.currentState.validate(); // Trigger validation
                if(!_phoneNumberError) {
                  // submit form or whatever your code flow is...
                }
              },
            ),
          ],
        ),
      ),
    );
  }
}
vfhzx4xs

vfhzx4xs4#

我已实现您的以下两项功能:
1)编辑时隐藏错误消息
2)按下登录按钮时验证输入字段
注:我已经注解了电话号码正则表达式,并将验证字符串长度〈10位进行测试。

import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {

  @override
  void initState(){
    super.initState();
  }

  final TextEditingController controller = TextEditingController();
//  final RegExp _phoneRegex = RegExp(r"^\+{1}\d{10, 15}\$");
  bool isError = false;
  bool isWriting = false;
  bool isLoginPressed = false;
  int counter = 0;
  String myErrorString = "";
  TextSelection currentPosition;
  final _textKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext ctx) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MapSample'),
      ),
      body: Container(
        child: Column(
          children: <Widget>[
            Form(
              key: _textKey,
              child: TextFormField(
                controller: controller,
                validator: (str) {
                  myErrorString = "";
                  if(isLoginPressed){
                    isError = true;
                    if (str.isEmpty) {
                      myErrorString = 'err_empty_field';
                      return myErrorString;
                    }
                    else if (str.length < 10) {
                      myErrorString = 'err_invalid_phone';
                      validateMe();
                      return myErrorString;
                    }
                    /*else if (!_phoneRegex.hasMatch(str)) {
                      myErrorString = 'err_invalid_phone';
                      validateMe();
                      return myErrorString;
                    }*/
                    isError = false;
                    myErrorString = "";
                  }else{
                    myErrorString = "";
                  }
                },
              ),

              onChanged: () {
                counter++;
                if(counter == 9){
                  counter = 0;
                  isLoginPressed = false;
                }
                if(isLoginPressed){

                }else{
                  isWriting = true;
                  isLoginPressed = false;
                  myErrorString = "";
                  _textKey.currentState.validate();
                }
              },

            ),
            RaisedButton(
              onPressed: () {
                counter = 1;
                isWriting = false;
                isLoginPressed = true;
                _textKey.currentState.validate();
              },
              child: Text('login'),
            )
          ],
        ),
      ),
    );
  }

  void validateMe() {
    if(isLoginPressed){
      currentPosition = TextSelection.fromPosition(
          TextPosition(offset: controller.text.length));
      String currentText = controller.text;
      _textKey.currentState.reset();
      controller.text = currentText;
      controller.selection = currentPosition;
      isWriting = false;
      isLoginPressed = true;
    }
  }

}
wkftcu5l

wkftcu5l5#

我找到了一个更简单的方法

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

mutmk8jj6#

这是一个例子,我认为它没有必要做onchange(),函数validate name做的工作...

String validateName(String value) {
    String patttern = r'(^[a-zA-Z ]*$)';
    RegExp regExp = new RegExp(patttern);
    if (value.length == 0) {
      return "Name is Required";
    } else if (!regExp.hasMatch(value)) {
      return "Name must be a-z and A-Z";
    }
    return null;
  }

  TextFormField(
                              controller: _lastname, validator: validateName ,
                              //initialValue: widget.contact.last_name,
                              decoration:
                                  InputDecoration(labelText: 'Last name'),
                            ),

void Save() {
 if (_keyForm.currentState.validate()) {
      // No any error in validation
      _keyForm.currentState.save(); 
................
}
ruarlubt

ruarlubt7#

我发现使用FocusNodeAtuoValidateMode.onUserInteraction的组合可以达到目的。

class _TextAutoValidateModeExampleState extends State<TextAutoValidateModeExample> {
  FocusNode node = FocusNode();
  @override
  Widget build(BuildContext context) {
    return Container(
      child: TextFormField(
        focusNode: node,
        autovalidateMode: AutovalidateMode.onUserInteraction,
        validator: (value) {
          if(node.hasFocus) return null;
          if (value!.isEmpty) return "value cannot be empty";
          if (!value.isEmail) return "not a valid email";
        },
      ),
    );
  }
}
zkure5ic

zkure5ic8#

// Call this method inside onChanged() and when its focusnode hasFocus
void formReset(GlobalKey<FormState> formKey, TextEditingController controller) {
  String stringValue = controller.text;
  TextPosition textPosition = controller.selection.base;

  formKey.currentState.reset();
  controller.text = stringValue;
  controller.selection = TextSelection.fromPosition(textPosition);
}
kgsdhlau

kgsdhlau9#

这个格式对我很有效,希望对别人有帮助。

validator: (value){
bool emailValid = RegExp(r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[a-zA-Z0-9]+\.[a-zA-Z]+").hasMatch(value);
                          
           isError = true;
           if(value.isEmpty){
                             return "Provide an email";
            }else if(!emailValid){
                return "Enter a valid email";
                              
                   }
                   isError = false;
                            return null;
                        },

相关问题