Flutter - 将表单绑定到模型

Posted

技术标签:

【中文标题】Flutter - 将表单绑定到模型【英文标题】:Flutter - Bind form to model 【发布时间】:2020-11-18 01:30:01 【问题描述】:

我在 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();

但是我现在如何将userRegistrationnickName 字段绑定到我的表单控件?我希望表单库有一个等效于 ngModel 的字段,以便我在表单控件上设置模型的字段。

或者这不是在 Flutter 中完成的?

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

【问题讨论】:

【参考方案1】:

从我在颤振中使用reactive_forms 来看,我没有看到任何与ngModel 等效的东西。这是因为像ReactiveTextField 这样的元素被设计为具有与小部件的双重绑定能力(双向绑定)

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

因此,要将 userRegistration 的 nickName 字段绑定到表单控件,您可以使用 ViewModelProvider

所以你的代码应该是这样的:

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 做同样的事情并保持视图和模型之间的分离,同时仍然保持数据同步。因此,没有显然需要将您的数据绑定到域层,而是 reactive_forms 完全不需要这样做,因为 process 是内置的。

【讨论】:

【参考方案2】:

2022 年更新 - reactive_forms_generator 已发布。这是reactive_forms 的代码生成器。它生成了很多表单功能;一个例子是它将强类型模型绑定到表单。它有一个 FormModel:

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

并且formmodel 是同步的(model 是一个 getter,它通过检索每个表单值返回强类型模型)。

【讨论】:

以上是关于Flutter - 将表单绑定到模型的主要内容,如果未能解决你的问题,请参考以下文章

如何将 Firestore 文档列表绑定到 Flutter 中的下拉菜单?

【Flutter】表单 - Password

Flutter 条件渲染 2 个表单 - 将表单值复制到另一个表单

Flutter 制作漂亮的登录表单

将模型从一个屏幕传递到另一个 FLUTTER 的更好方法

Flutter 向 API 发送数据(图像和表单)