Flutter Forms 变更验证

问题描述

嘿，也许有人可以帮我弄清楚如何在 Flutter 中实现正确的表单验证。

所以基本上在 Inputdecoration 中我们有

decoration: Inputdecoration(
            // focusedBorder: OutlineInputBorder(
            //   borderSide: BorderSide(color: Colors.white,width: 3.0),// ),errorBorder: OutlineInputBorder(
              borderSide: BorderSide(color: Colors.red,),enabledBorder: OutlineInputBorder(
              borderSide: BorderSide(color: Colors.greenAccent,focusedErrorBorder: OutlineInputBorder(
              borderSide: BorderSide(color: Colors.red,border: OutlineInputBorder(
              borderSide: BorderSide(color: Colors.white,labelText: 'Email',// errorText: !_isValid ? "Invalid Email" : null,labelStyle: TextStyle(color: Colors.white),prefixIcon: Padding(
              padding: const EdgeInsets.only(top: 10,left: 13),child: FaIcon(
                FontAwesomeIcons.at,color: Colors.white,size: 25,

所以问题是我无法理解如何在未触摸时在表单上设置常规边框，而不是在触摸时，在每个输入上，它必须验证输入并设置错误（如果无效）。我知道在 TextFormField 上我可以传递 onchange 函数并进行验证

onChanged: (value) {
            if (value.isEmpty || !value.contains('@')) {
              setState(() {
                 _isValid = false;
              });
              print('invalid');
            } else {
              setState(() {
                 _isValid = true;
              });
            }

使用这种方法时，我遇到了问题，首先我必须设置 _isValid 的初始值，在这种情况下，当表单打开但未被触摸时，它已经启用或出现错误，具体取决于 _isValid 的初始值。

我来自网络并与 Angular 一起工作，我们有反应式表单，也许有人会解释如何在 Flutter 中实现类似的行为？

解决方法

验证器：（值）{ if (enter code herevalue.isEmpty || !value.contains('@')) { 返回“格式不正确”； } 1 创建全局表单键 2 在 Form 小部件中扭曲您的小部件 3 将您的全局密钥传递给您的 Form 小部件的 key 参数 4 并在按钮单击时使用此行 5 _yourFormKey.CurrentState.Validate();