Flutter表单验证与状态管理插件flutter_mobx_form_validation_kit的使用

Benefits of the kit

该插件具有以下优点：

• 兼容Android、iOS、Web、桌面等平台。
• 兼容Mobx。
• 设计用于异步验证。
• 轻松嵌入现有项目。

Getting Started

库可以在不同的代码结构方法中使用，但本文将使用MVC（模型-视图-控制器）模式来描述。换句话说，数据展示通过“傻瓜”组件实现，而业务逻辑（包括验证）嵌入在Stores中。组件将使用React Hooks构建，因为这是一种更现代的方法，但库也适用于基于类的方法。

class RegistrationForm extends ControlsCollection {
  final FormControl<String> name;
  RegistrationForm({this.name});
  [@override](/user/override)
  Iterable<AbstractControl> allFields() => [this.name];
}

class RegistrationStore {
  FormGroup<RegistrationForm> form;

  RegistrationStore() {
    this.form = FormGroup(RegistrationForm(
        name: FormControl(
            value: "",
            options: OptionsFormControl(validators: [requiredValidator()]))));
  }

  void dispose() {
    this.form.dispose();
  }
}

class _RegistrationState extends State<Registration> {
  RegistrationStore store = RegistrationStore();

  [@override](/user/override)
  void dispose() {
    store.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(_) => Observer(builder: (BuildContext context) {
        return Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(store.form.controls.name.value, style: TextStyle(fontSize: 20)),
              TextField(
                controller: store.form.controls.name.controller,
                onChanged: (String text) => store.form.controls.name.value = text,
                decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  labelText: "姓名",
                ),
              ),
            ]);
      });
}

如果你开始输入，错误消息会立即消失。在自然且熟悉的显示格式下，验证错误消息会在输入字符后或失去字段焦点时出现；mobx-form-validation-kit 拥有所有必要的工具来实现这一点。

控制器状态

表单控制状态

现在，让我们讨论控制器嵌套的结构及其功能。mobx-form-validation-kit 库有三种主要类型的节点。

这些节点可以以树状结构组装。任何级别的嵌套都受支持，但通常从FormGroup开始。

FormGroup
-- FormControl
-- FormControl
-- -- FormGroup
-- -- FormArray
-- -- -- FormGroup
-- -- --  -- FormControl
-- -- FormArray
-- -- --  FormControl

当定义每个对象类时，它们获得以下选项集：

此外，FormControl还有一组附加选项：

每个树元素支持以下字段集：

await this.form.wait();
if (this.form.invalid) {
  ...
}

注意： 在FormGroup和FormArray中，字段valid和invalid关注嵌套元素。 通过检查顶层元素，你可以找出表单的所有低级元素的有效性。 但是！FormGroup和FormArray节点有自己的验证集和错误列表（错误、警告、信息消息、成功）。换句话说，如果你问FormGroup关于错误，它只会返回自己的错误，而不是嵌套的FormControl的错误。

Validation

mobx-form-validation-kit 允许编写自定义验证，但也包含了一套自己的验证规则。

firstName: FormControl(
    value: "",
    options: OptionsFormControl(validators: [
    requiredValidator(),
    minLengthValidator(2),
    maxLengthValidator(5),
    notContainSpacesValidator()
])),

如你所见，列表中的所有验证都已执行，这个问题通过使用wrapperSequentialCheck解决。它的调用和使用方式与普通验证器函数相同，但它接受一个验证器数组，这些验证器将依次运行，即只有在前一个验证没有错误的情况下才会启动下一个验证。

第二个包装函数是验证流程控制函数。wrapperActivateValidation的第一个参数接受一个函数，在其中你需要指定激活验证的条件。与传递给FormControl的activate函数不同，这种检查适用于更复杂的逻辑。假设我们有一个通用的FormGroup支付表单构建器，并且服务器只有一个方法接受通用的一组字段。但是问题在于，即使表单是一个，我们需要根据“支付类型”向用户显示不同的字段集。因此，wrapperActivateValidation允许你编写根据支付类型执行各种检查的逻辑。

firstName: FormControl(
          value: "",
          options: OptionsFormControl(validators: [
            wrapperSequentialCheck([
              requiredValidator(),
              minLengthValidator(2),
              maxLengthValidator(5),
              notContainSpacesValidator()
            ])
          ]))

自定义的组验证：

class FormRange extends ControlsCollection {
  final FormControl<DateTime> min;
  final FormControl<DateTime> max;
  FormRange({this.min, this.max});
  [@override](/user/override)
  Iterable<AbstractControl> allFields() => [this.min, this.max];
}

class RegistrationForm extends ControlsCollection {
…
  RegistrationForm(
      {this.firstName, this.lastName, this.email, this.age, this.dateRange});

  [@override](/user/override)
  Iterable<AbstractControl> allFields() =>
      [this.firstName, this.lastName, this.email, this.age, this.dateRange];
}

this.form = FormGroup(RegistrationForm(
...
      dateRange: FormGroup<FormRange>(
          FormRange(
              min: FormControl<DateTime>(value: DateTime.now()),
              max: FormControl<DateTime>(value: DateTime.now())),
          options: OptionsFormGroup<FormRange>(validators: [
            (FormGroup<FormRange> group) async {
              if (group.controls.max.value.isBefore(group.controls.min.value)) {
                return [
                  ValidationEvent(
                    message: '日期“从”晚于日期“到”，'
                    type: ValidationEventTypes.Error,
                  )
                ];
              }
              return [];
            },
          ])),    
));

如你从示例中看到的，验证没有分配给某个具体的东西[虽然这也是可能的]，而是分配给了整个组。剩下的就是显示组的错误。

Final Check Before Submission

await this.form.wait();
if (this.form.invalid) {
  this.form.setTouched(true);
  final firstError = this.form.allControls().firstWhere((c) => c.invalid);
  firstError.focusNode.requestFocus();
}

Conclusion

很明显，库的功能不仅仅局限于描述的用例。我们可以提供更多用例并提供其他示例。

• 这些验证不仅会在值更改时工作，还会在验证内的可观察变量更改时工作。
• active方法的工作方式。
• FormControl 可以不仅由特定变量初始化，还可以由返回值的函数初始化。此函数内的更改也将被跟踪。
• 如何使用FormArray。
• 如何在向服务器发起请求的同时进行复杂验证，并确保此验证中的变量仍然被跟踪。

还有很多其他功能，使得mobx-form-validation-kit可以开箱即用。

PS 如果您发现任何错误，请联系我们，我们将修复它 :)

示例代码

以下是示例代码：

import 'package:flutter/material.dart';
import 'components/registration/registration.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(body: SafeArea(child: Registration())),
    );
  }
}