Flutter -将窗体绑定到模型

cu6pst1q  于 2023-05-19  发布在  Flutter
关注(0)|答案(2)|浏览(170)

我在Flutter中使用reactive_forms,这是一个模型驱动的表单库,它的灵感来自Angular Reactive Forms。
这是相当简单的,添加一个表单与一个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

oyt4ldly

oyt4ldly1#

从我在flutter中使用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完全消除了这样做的需要,因为 * 进程 * 是内置的。

hgc7kmma

hgc7kmma2#

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

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

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

相关问题