用户交互后自动验证 TextFormField

Posted 2023-02-23

【中文标题】用户交互后自动验证 TextFormField

【英文标题】：Autovalidate of TextFormField after user interaction

【发布时间】：2021-10-13 13:19:20

【问题描述】：

我正在开发一个颤振电子商务应用程序，并且在注册时，用户名应该是唯一的，为此，我们在 API 中有一个端点来检查用户名是否被使用，我的问题是验证，我需要验证用户交互后，在颤振中我们有自动验证模式，但只有（always, onUserInteraction）选项，我需要在用户交互后立即验证

用户名输入的textFormField是

TextFormField(
                cursorColor: Theme.of(context).primaryColor,
                autovalidateMode: AutovalidateMode.onUserInteraction,
                decoration: InputDecoration(
                  suffixIcon: SuffixIcon(),
                  labelText:
                      'Choose suitable name and relevant to your products',
                  hintText: 'SweetCandies',
                  labelStyle: TextStyle(color: Colors.black),
                  focusedBorder: UnderlineInputBorder(
                    borderSide: BorderSide(
                      color: Theme.of(context).primaryColor,
                    ),
                  ),
                ),
                validator: (value) 
                  if(value!.isNotEmpty)
                  Provider.of<Store>(context).usernameExistence(value, 'no');
                  if(Provider.of<Store>(context).nameExistence)
                    return 'The Chosen name is already taken';
                  
                  if (value.isEmpty) 
                    return 'Required';
                  
                ,
                onSaved: (value) 
                  Provider.of<Store>(context, listen: false)
                      .storeInformation['name'] = value!;
                ,
              )

有什么方法可以在用户交互后激活验证器？？？

【问题讨论】：

您能解释一下“用户交互后”是什么意思吗？

我的意思是在用户将值插入到 textFormField 之后。

【参考方案1】：

您可以将focusNode 附加到TextField，这样每当焦点发生变化时，您就可以进行 api 调用并验证文本

将此代码和initState 添加到您的代码中

TextEditingController controller = TextEditingController();
FocusNode focusNode;
bool _hasInputError;
String errorText = "";
String text;
  @override
  void initState() 
    super.initState();
    focusNode = new FocusNode();
    focusNode.addListener(() 
      if (!focusNode.hasFocus) 
        setState(() 
         if(Provider.of<Store>(context).nameExistence)// your condition
            _hasInputErro = true;
            errorText = 'The Chosen name is already taken';
         // <-- else if condition ...
         else
           _hasInputErro = false;
         
        );
      
    );
  

在 TextFormField 中：

TextFormField(
    focusNode: focusNode,// <-- add focusNode here
    controller: controller,// <-- add controller here
    cursorColor: Theme.of(context).primaryColor,
    autovalidateMode: AutovalidateMode.onUserInteraction,
    decoration: InputDecoration(
    errorText: _hasInputError ? errorText : null, // <-- add this line to show errors
      suffixIcon: SuffixIcon(),
      labelText:
          'Choose suitable name and relevant to your products',
      hintText: 'SweetCandies',
      labelStyle: TextStyle(color: Colors.black),
      focusedBorder: UnderlineInputBorder(
        borderSide: BorderSide(
          color: Theme.of(context).primaryColor,
        ),
      ),
    ),
   // validator: ... , // <-- comment validator
    onSaved: (value) 
      Provider.of<Store>(context, listen: false)
          .storeInformation['name'] = value!;
    ,
)