[英]flutter: How to hide the error message on tap on textfield
I want to hide the error text when user tap of textfield, if fields are empty and when i click on button it prints the error message on textfield but i want, when i tap on textfield that error message should hide.我想在用户点击文本字段时隐藏错误文本,如果字段为空,当我点击按钮时,它会在文本字段上打印错误消息,但我想要,当我点击文本字段时,该错误消息应该隐藏。 here is the code
这是代码
Container(
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0)),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(children: <Widget>[
TextFormField(
hintText: 'Description',
labelText: 'Description',
labelStyle: TextStyle(color: Colors.blue)),
controller: descriptionController,
validator: (value) {
if (value.isEmpty) {
return 'This field is required.';
}
return null;
},
DropdownButtonFormField<String>(
items: leaveType.map<DropdownMenuItem<String>>(
(String value) {
return DropdownMenuItem<String>(
value: value, child: Text(value));
}).toList(),
hint: Text(
"Please choose a leave",
style: TextStyle(color: Colors.black),
),
onChanged: (value) async {
setState(() {
_selectedLeave = value;
leaveIndex = leaveType.indexOf(value);
leave = leaveIndex + 1;
});
},
value: _selectedLeave == null
? null
: leaveType[leaveIndex],
validator: (value) => value == null
? 'Please choose leave type'
: null,
),
FlatButton( child:Text("submit",onPressed: () {
if (_formKey.currentState.validate()) {
callRequestLeaveApi(); //here calling a method when field are not empty
}
I'm using a bool to handle Error text.我正在使用 bool 来处理错误文本。 also, we will
onTap
method from TextFiled to hide error text.此外,我们将使用 TextFiled 的
onTap
方法来隐藏错误文本。
Demo Widget演示小工具
class DraftPage extends StatefulWidget {
@override
_DraftPageState createState() => _DraftPageState();
}
class _DraftPageState extends State<DraftPage> {
final descriptionController = TextEditingController();
bool _validate = false;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0)),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
TextFormField(
decoration: InputDecoration(
errorText: _validate ? 'This field is required.' : null,
hintText: 'Description',
labelText: 'Description',
labelStyle: TextStyle(color: Colors.blue),
),
controller: descriptionController,
onTap: () {
setState(() {
_validate = false;
});
},
),
ElevatedButton(
onPressed: () {
setState(() {
descriptionController.text.isEmpty
? _validate = true
: false;
});
},
child: Text("press"),
),
],
),
),
),
),
),
);
}
}
Does it satisfy your question?它满足你的问题吗?
从 TextField 中删除验证器,不会显示任何红色提示/错误
Set the autovalidateMode
parameter of the Form
widget to AutovalidateMode.onUserInteraction
:将
Form
小部件的autovalidateMode
参数设置为AutovalidateMode.onUserInteraction
:
Form(
key: _formKey,
autovalidateMode: AutovalidateMode.onUserInteraction,
...
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.