Flutter：表单验证同时验证所有文本字段答案

【问题标题】：Flutter: Form validation validates all textfields togetherFlutter：表单验证同时验证所有文本字段
【发布时间】：2021-04-23 13:07:24
【问题描述】：

我正在尝试验证具有电子邮件和密码字段的登录表单。验证模式设置为onUserInteraction。

但当前的行为，即使开始在电子邮件字段上输入，也会验证密码字段。。我想要实现的是

验证单个文本字段。不在一起

也许，仅在对焦后验证（模糊）

Form(
  autovalidateMode: AutovalidateMode.onUserInteraction,
  onChanged: () {
    controller.isValidForm.value =
        controller.formKey.currentState.validate();
  },
  key: controller.formKey,
  child: Column(
    children: <Widget>[
      FormTextField(
        validator: (value) {
          if (value.isEmpty) {
            return 'Please enter an email address';
          } else if (!controller.emailRegExp.hasMatch(value)) {
            return 'Invalid email address!';
          }
          return null;
        },
        onSaved: (value) {
          controller.model.emailAddress = value;
        },
        title: "Email id",
      ),
      UIHelper.verticalSpaceLarge(),
      FormTextField(
        isObscure: controller.isPasswordObsecured.value,
        validator: (value) {
          if (value.isEmpty) {
            return 'Please enter a password';
          }
          return null;
        },
        onSaved: (value) {
          controller.model.password = value;
        },
        title: "Password",
        isObscureCallBack: controller.changePasswordVisibility,
        isPasswordField: true,
      ),
      UIHelper.verticalSpaceExtraLarge(),
      FormSubmitButton(
        isValidForm: controller.isValidForm.value,
        onPressed: () {
          if (controller.formKey.currentState.validate()) {
            controller.formKey.currentState.save();
            print(controller.model);
            controller.doLogin();
          }
        },
        label: "Login",
      ),
    ],
  ),
),

【问题讨论】：

这是因为你在 Form 上使用了 onChanged。
尝试删除onChanged: () { controller.isValidForm.value = controller.formKey.currentState.validate(); },
如果你想继续使用这种风格，那么你将不得不制作 2 个不同的键。
删除 onChange 对验证行为没有影响 @UjjwalRaijada
验证器仅在被调用时才起作用。它在 onChange 和 FormSubmitButton 上被调用。请尝试删除 onChange 并使用热重载。它应该工作/

标签： flutter flutter-getx

【解决方案1】：

继续我们的谈话......我所做的是，我创建了一个在提交表单时调用的函数。那是检查验证的时间，如果有错误，则会显示错误。我要验证的代码：

void _submit() async {
  final isValid = _form.currentState!.validate();   // validation
  if (!isValid) {     // if validation is false it will return error as per mentioned by you in validator
    return;
  }
  _form.currentState!.save();      // if everything is fine, it will save the form and proceed further

  // code from here if the form gets validated

}

【讨论】：

【解决方案2】：

您应该将autovalidateMode: AutovalidateMode.onUserInteraction 放在FormTextField 内，而不是放在Form 内，以便在用户交互时启用单个文本字段验证（更改/模糊）

Form(
  //not here
  //autovalidateMode: AutovalidateMode.onUserInteraction,
  onChanged: () {
    controller.isValidForm.value =
        controller.formKey.currentState.validate();
  },
  key: controller.formKey,
  child: Column(
    children: <Widget>[
      FormTextField(
        // put it here
        autovalidateMode: AutovalidateMode.onUserInteraction,
        ...
        title: "Email id",
      ),
      UIHelper.verticalSpaceLarge(),
      FormTextField(
        // and put it here
        autovalidateMode: AutovalidateMode.onUserInteraction,
        ...
        title: "Password",
      ),
      ...
    ],
  ),
),

【讨论】：