flutter - 仅当我更改时才颤动自动验证模式

Question

当我单击并输入第一个 TextFormField 时，我的图像中有两个 TextFormField，为什么我的第二个 TextFormField 也会自动执行验证器？我只希望验证器运行我单击/键入该 TextFormField

这是我的代码

Form(
            key: formKey,
            child: Column(
              children: [
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: 15),
                  child: TextFormField(
                    autovalidateMode: AutovalidateMode.onUserInteraction,
                    controller: TFKdPelanggan,
                    decoration: InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: 'Kode Pelanggan',
                        hintText: 'Masukkan Kode Pelanggan Anda'),
                    validator: RequiredValidator(errorText: "Kode Pelanggan tidak boleh kosong"),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(
                      left: 15.0, right: 15.0, top: 15, bottom: 0),
                  //padding: EdgeInsets.symmetric(horizontal: 15),
                  child: TextFormField(
                    autovalidateMode: AutovalidateMode.onUserInteraction,
                    controller: TFEmail,
                    keyboardType: TextInputType.emailAddress,
                    decoration: InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: 'Email',
                        hintText: 'Masukkan Email Anda'),
                    validator: MultiValidator(
                      [
                        RequiredValidator(errorText: "Email tidak boleh kosong"),
                        EmailValidator(errorText: "Email tidak valid")
                      ]
                    )
                  ),
                ),
              ],
            ),
          ),

标签： flutter

Answer 1

你在用form_field_validator包吗？我将您的代码作为下面提供的代码块运行，它的工作方式与您希望的一样：仅验证用户已触及的字段。

我自己在这里添加的是设置TextEditingControllers、处理它们和设置表单键。也许你能发现我的方法与你自己在这些部分的不同之处？

import 'package:flutter/material.dart';
import 'package:form_field_validator/form_field_validator.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyForm(),
    );
  }
}

class MyForm extends StatefulWidget {
  const MyForm();

  @override
  _MyFormState createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {
  final TextEditingController TFKdPelanggan = TextEditingController();
  final TextEditingController TFEmail = TextEditingController();

  @override
  void dispose() {
    TFKdPelanggan.dispose();
    TFEmail.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: EdgeInsets.all(40),
        child: Column(
          children: [
            Form(
              key: GlobalKey<FormState>(),
              child: Column(
                children: [
                  Padding(
                    padding: EdgeInsets.symmetric(horizontal: 15),
                    child: TextFormField(
                      autovalidateMode: AutovalidateMode.onUserInteraction,
                      controller: TFKdPelanggan,
                      decoration: InputDecoration(
                          border: OutlineInputBorder(),
                          labelText: 'Kode Pelanggan',
                          hintText: 'Masukkan Kode Pelanggan Anda'),
                      validator: RequiredValidator(
                          errorText: "Kode Pelanggan tidak boleh kosong"),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(
                        left: 15.0, right: 15.0, top: 15, bottom: 0),
                    //padding: EdgeInsets.symmetric(horizontal: 15),
                    child: TextFormField(
                        autovalidateMode: AutovalidateMode.onUserInteraction,
                        controller: TFEmail,
                        keyboardType: TextInputType.emailAddress,
                        decoration: InputDecoration(
                            border: OutlineInputBorder(),
                            labelText: 'Email',
                            hintText: 'Masukkan Email Anda'),
                        validator: MultiValidator([
                          RequiredValidator(
                              errorText: "Email tidak boleh kosong"),
                          EmailValidator(errorText: "Email tidak valid")
                        ])),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}