Flutter

Question

我在 Flutter 中使用 reactive_forms，这是一个模型驱动的表单库，它的灵感来自 Angular Reactive Forms。

添加一个带有一个名为 'nickName':

的 formControl 的表单相当简单

  final _form = FormGroup({
    'nickName':
        FormControl<String>(validators: [Validators.required]),
  });

我的问题是，将表单控件“nickName”绑定到域模型的属性不是通常的做法和良好做法吗？因为这是我在 Angular.

中处理的另一个代码库中所做的

我确实有这个表单的域模型（尽管它的字段比表单包含的字段多。其余字段在以下页面的表单中设置 - 就像设置向导一样）：

class UserRegistrationEntity {
  String nickName;
  String email;
  String confirmEmail;
  String password;
  String confirmPassword;
}

我可以这样创建模型：

final userRegistration = UserRegistrationEntity();

但是现在如何将 userRegistration 的 nickName 字段绑定到我的表单控件？我希望表单库具有与 ngModel 字段等效的字段，以便我在表单控件上设置我的模型字段。

或者这不是在 Flutter 中完成的事情？

示例：https://angular.io/api/forms/NgModel#using-ngmodel-on-a-standalone-control

Answer 1

从我在 flutter 中使用 reactive_forms，我没有看到任何等同于 ngModel 的东西。这是因为像 ReactiveTextField 这样的元素被设计为具有与小部件的双重绑定能力（双向绑定）

这就是为什么你不包括像 onChanged 这样的属性，这类似于 ngModel 方法 #ngOnChanges()

因此，要将 userRegistration 的 nickName 字段绑定到您的表单控件，您可以使用 ViewModel 和 Provider.

因此您的代码将如下所示：

class YourViewModel {
   final _form = FormGroup({
    'nickName':
        FormControl<String>(validators: [Validators.required]),
  });

//assuming you are signing in
void signIn() {
    final credentials = this.form.value;
    //the rest of your signIn code
  }

}

class YourScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final viewModel = Provider.of<YourViewModel>(context, listen: false);
    return ReactiveForm(
      formGroup: viewModel.form,
      child: Column(
        children: <Widget>[
          ReactiveTextField(
            formControlName: 'nickName',
          ),
          ReactiveFormConsumer(
            builder: (context, form, child) {
              return RaisedButton(
                child: Text('Submit'),
                // if the form is valid, sign-in or whatever you need to do with the form data (I have used signIn)
                onPressed: form.valid ? viewModel.signIn : null,
              );
            },
          ),
        ],
      ),
    );
  }
}

结论

ngModel 是一个绑定输入的指令，Reactive Forms 做同样的事情并保持视图和模型之间的分离，同时仍然保持数据同步。因此，NO 显然需要将您的数据绑定到域层，而不是 reactive_forms 完全不需要这样做，因为 process 是内置的。

Answer 2

2022 年更新 - reactive_forms_generator is released. It's a code generator for reactive_forms。它生成了很多表单功能；一个例子是它将强类型模型绑定到表单。它有一个 FormModel：

abstract class FormModel<TModel> {
  FormModel({required this.form});
  final FormGroup form;
  TModel get model;
}

并且form和model是同步的（model是一个getter，returns通过检索每个表单值的强类型模型）。

Flutter - 将表单绑定到模型

Flutter - Bind form to model

dart

flutter-reactive-forms