Flutter Form组件未验证表单中的所有字段。

huangapple go评论80阅读模式
英文:

Flutter Form widget not validating all fields in the form

问题

我有一个IntlPhoneWidget和一个文本字段(widget)位于一个Stepper(widget)内。当我按下继续按钮时,它只验证IntlPhoneWidget而不验证文本字段。另外,如果这些字段为空,我该如何为Stepper内的每个字段添加自定义验证消息?

这是我的代码-

  1. @override
  2. Widget build(BuildContext context) {
  3. return Scaffold(
  4. body: Form(
  5. key: _formKey,
  6. child: Stepper(
  7. currentStep: _currentStepper,
  8. onStepContinue: _continueStep,
  9. steps: [
  10. Step(
  11. title: const Text('输入您的姓名和电话号码'),
  12. content: Column(
  13. children: [
  14. TextField(
  15. controller: _displayNameTextFieldController,
  16. ),
  17. IntlPhoneField(
  18. decoration: const InputDecoration(
  19. labelText: '电话号码',
  20. ),
  21. onChanged: (phone) {
  22. setState(() {
  23. _phoneNumber = (phone.completeNumber).trim();
  24. });
  25. },
  26. )
  27. ],
  28. ),
  29. )
  30. ],
  31. ),
  32. ),
  33. );
  34. }
  35. void _continueStep() {
  36. if (_currentStepper == 0) {
  37. _formKey.currentState?.validate();
  38. }
  39. }
英文:

I have a IntlPhoneWidget and a textfield widget inside of a stepper widget. When I press the continue button it only validates the intlphonewidget and not the textfield. Also how do I put in a custom validation message for each of the fields inside of the stepper if those fields are empty?

Here is my code-

  1. @override
  2. Widget build(BuildContext context) {
  3. return Scaffold(
  4. body: Form(
  5. key: _formKey,
  6. child: Stepper(
  7. currentStep: _currentStepper,
  8. onStepContinue: _continueStep,
  9. steps: [
  10. Step(
  11. title: const Text('Enter your name and phone number'),
  12. content: Column(
  13. children: [
  14. TextField(
  15. controller: _displayNameTextFieldController,
  16. ),
  17. IntlPhoneField(
  18. decoration: const InputDecoration(
  19. labelText: 'Phone Number',
  20. ),
  21. onChanged: (phone) {
  22. setState(() {
  23. _phoneNumber = (phone.completeNumber).trim();
  24. });
  25. },
  26. )
  27. ],
  28. ),
  29. )
  30. ],
  31. ),
  32. ),
  33. );
  34. }
  35. void _continueStep() {
  36. if (_currentStepper == 0) {
  37. _formKey.currentState?.validate();
  38. }
  39. }

答案1

得分: 2

这是因为 IntlPhoneField 具有内置的 validator,但 TextField 没有,如果您想为第一个字段也设置 validator,您需要改用 TextFormField 并像这样设置 validator

  1. TextFormField(
  2. controller: _displayNameTextFieldController,
  3. validator: (value) {
  4. if (value != null && value.isEmpty) {
  5. return '填写姓名字段';
  6. }
  7. return null;
  8. },
  9. )
英文:

This happened because the IntlPhoneField has built-in validator, but TextField doesn't, if you want to have validator for first field too , you need to use TextFormField instead and set the validator like this:

  1. TextFormField(
  2. controller: _displayNameTextFieldController,
  3. validator: (value) {
  4. if (value != null && value.isEmpty) {
  5. return 'fill name field';
  6. }
  7. return null;
  8. },
  9. )

huangapple
  • 本文由 发表于 2023年1月9日 03:55:03
  • 转载请务必保留本文链接:https://go.coder-hub.com/75050836.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定