-1

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

所以基本上在 InputDecoration 我们有

decoration: InputDecoration(
            // focusedBorder: OutlineInputBorder(
            //   borderSide: BorderSide(color: Colors.white, width: 3.0),
            // ),
            errorBorder: OutlineInputBorder(
              borderSide: BorderSide(color: Colors.red, width: 3.0),
            ),
            enabledBorder: OutlineInputBorder(
              borderSide: BorderSide(color: Colors.greenAccent, width: 3.0),
            ),
            focusedErrorBorder: OutlineInputBorder(
              borderSide: BorderSide(color: Colors.red, width: 3.0),
            ),
            border: OutlineInputBorder(
              borderSide: BorderSide(color: Colors.white, width: 3.0),
            ),
            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 合作，我们有反应形式，也许有人解释了如何在颤振中实现类似的行为？

4

1 回答 1

0

验证器：(value) { if ( enter code herevalue.isEmpty || !value.contains('@')) { return "格式不正确"; 1 创建一个全局表单键 2 在表单小部件中扭曲您的小部件 3 将全局键传递给表单小部件的 key 参数 4 并在按钮单击 5 _yourFormKey.CurrentState.Validate(); 上使用此行

于 2021-01-24T22:28:30.683 回答