用户交互后自动验证 TextFormField答案

【问题标题】：Autovalidate of TextFormField after user interaction用户交互后自动验证 TextFormField
【发布时间】：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 之后。

标签： flutter dart flutter-layout flutter-test dart-pub

【解决方案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!;
    },
)

【讨论】：