dart - 成功验证后不会调用 Flutter TextFormField onSave()

Question

我在 Flutter TextFormField 中有一个奇怪的问题。我在 TextFormField 中实现了表单验证。但是验证成功后不会调用 onSaved() 函数。

首先我使用 TextFormField 创建了基本的小部件

--- 在 AppWidgets 类中 ---

  static Widget buildTextFormField(
    String labelText,
    String helperText,
    IconData prefixIcon, {
    Widget suffixIcon,
    bool obscureText = false,
    TextInputType keyboardType = TextInputType.text,
    TextInputAction textInputAction = TextInputAction.none,
    FocusNode focusNode,
    ValueChanged<String> onFieldSubmitted,
    TextEditingController controller,
    FormFieldValidator<String> validator,
    FormFieldSetter<String> onSaved,
    bool isLightTheme = false,
  }) {
    return Theme(
      data: isLightTheme
          ? AppThemesLight.textFormFieldThemeData
          : AppThemesDark.textFormFieldThemeData,
      child: TextFormField(
        controller: controller,
        validator: validator,
        onSaved: onSaved,
        keyboardType: keyboardType,
        textInputAction: textInputAction,
        focusNode: focusNode,
        onFieldSubmitted: onFieldSubmitted,
        obscureText: obscureText,
        decoration: InputDecoration(
          filled: true,
          fillColor: isLightTheme
              ? AppColorsLight.textFieldFillColor
              : AppColorsDark.textFieldFillColor,
          labelText: labelText,
          helperText: helperText,
          border: OutlineInputBorder(
            borderRadius: BorderRadius.all(
              Radius.circular(AppDimensions.textFieldBorderRadius),
            ),
          ),
          prefixIcon: Icon(
            prefixIcon,
            color: isLightTheme
                ? AppColorsLight.primaryTextColor
                : AppColorsDark.primaryTextColor,
          ),
          suffixIcon: suffixIcon,
        ),
      ),
    );
  }

据此，从字段创建电子邮件文本。

  static Widget buildEmailTextFormField(LoginState loginState) {
    return AppWidgets.buildTextFormField(
      'Email address',
      'Your email address',
      Icons.email,
      keyboardType: TextInputType.emailAddress,
      textInputAction: TextInputAction.next,
      focusNode: loginState.focusNodes[0],
      onFieldSubmitted: (String value) {
        print('submitted $value');
        loginState.onFocusChanged(index: 0);
      },
      validator: (String email) {
        print('validator $email');
        return InputValidators.validateEmail(email);
      },
      onSaved: (String email) {
        print('saved $email');
        loginState.email = email;
      },
    );
  }

这是我使用的电子邮件验证器。

  static String validateEmail(String email) {
    Pattern pattern =
        r'^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$';
    RegExp regex = new RegExp(pattern);
    if (email.isEmpty)
      return 'Email can\'t be empty';
    else if (!regex.hasMatch(email))
      return 'Enter valid email address';
    else
      return null;
  }

我通过在 onSaved() 函数中放入 print 语句来测试上面的代码，但是验证成功后它没有打印。

Answer 1

验证成功后不会自动调用onSaved()函数。我们必须手动调用 _formKey.currentState.save() 来保存我们的变量。

Form(
  key: key,
  child: TextFormField(
    onSaved: (val) {
      print('saved');
    },
    validator: (val) {
      print('validating');
    },
  ),
),
RaisedButton(
  child: Text('Click me'),
  onPressed: () {
    if (key.currentState.validate()) {
      key.currentState.save();
      print('valid');
    }
  },
),