flutter 形式 : Get the list of fields in error

标签 flutter flutter-form-builder

我们可以在验证后从 Flutter 表单中获取错误字段列表吗?这将帮助开发人员使用焦点节点将注意力重定向到错误的领域。

最佳答案

我认为不可能从 Form 获得此类信息。对象或 FormState .
但这里有一种方法可以获得你想要的结果(专注于错误的领域):

class _MyWidgetState extends State<MyWidget> {
  FocusNode _fieldToFocus;
  List<FocusNode> _focusNodes;

  final _formKey = GlobalKey<FormState>();
  final _numberOfFields = 3;

  String _emptyFieldValidator(String val, FocusNode focusNode) {
    if (val.isEmpty) {
      _fieldToFocus ??= focusNode;
      return 'This field cannot be empty';
    }
    return null;
  }

  @override
  void initState() {
    super.initState();
    _focusNodes =
        List<FocusNode>.generate(_numberOfFields, (index) => FocusNode());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(actions: [
        IconButton(
          icon: Icon(Icons.check),
          onPressed: () {
            if (_formKey.currentState.validate()) {
              print('Valid form');
            } else {
              _fieldToFocus?.requestFocus();
              _fieldToFocus = null;
            }
          },
        ),
      ]),
      body: Form(
        key: _formKey,
        child: Column(children: [
          ...List<TextFormField>.generate(
            _numberOfFields,
            (index) => TextFormField(
              decoration: InputDecoration(hintText: "Field $index"),
              focusNode: _focusNodes[index],
              validator: (val) => _emptyFieldValidator(val, _focusNodes[index]),
            ),
          ),
        ]),
      ),
    );
  }
}
您只需要创建一个 FocusNode对于您的每一个领域,您都可以调用 requestFocus在一个精确的领域(在你的情况下被认为是无效的领域)。然后在 validator表单字段的属性,因为它是 FormState.validate() 调用的方法,您需要设置一个临时变量,该变量将包含正确的 FocusNode .在我的例子中,我只设置了变量 _fieldToFocus如果它尚未使用 ??= 分配运算符(operator)。在请求节点上的焦点后,我设置了 _fieldToFocus返回 null所以它仍然适用于另一个验证。
您可以尝试我在 DartPad 上使用的完整测试代码.
抱歉,如果我从您的问题中得出了一些结论,但我仍然希望这对您有所帮助。

关于 flutter 形式 : Get the list of fields in error,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63833619/

相关文章:

mobile - 卡片布局 - Flutter

flutter - 在 flutter 中 IntrinsicHeight 的替代品是什么?

firebase - 如何在Flutter中检索Firebase Storage图像流?

formbuilder - 在formio中制作一个从其他字段计算出来的字段

flutter : initial value not updating in Form (FormBuilder)

dart - Flutter - 使用 Controller 获取 'DateTimePickerFormField' 值的数据

flutter - 如何向新的自动完成小部件添加装饰(边框、提示文本、前缀图标、后缀图标)...?

Flutter运行问题Error : No named parameter with the name 'anchorPoint'

flutter - 如何在弹出窗口中创建表单

firebase - Flutter Cloud Firestore 将 serverTimestamp 转换为字符串