我在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();
但是现在如何将userRegistration
的nickName
字段绑定到表单控件?我希望表单库有一个等价于ngModel
的字段,以便我在表单控件上设置模型的字段。
或者这不是在Flutter中完成的事情?
示例:https://angular.io/api/forms/NgModel#using-ngmodel-on-a-standalone-control
2条答案
按热度按时间oyt4ldly1#
从我在flutter中使用
reactive_forms
的情况来看,我没有看到任何与ngModel
等效的东西。这是因为像ReactiveTextField
这样的元素被设计成具有与小部件的双重绑定功能(双向绑定)这就是为什么不包括
onChanged
这样的属性,它类似于ngModel方法#ngOnChanges()
因此,要将userRegistration的nickName字段绑定到表单控件,需要使用
ViewModel
和Provider
。所以你的代码看起来像这样:
结论
ngModel是一个绑定输入的指令,Reactive Forms也是这样做的,并保持视图和模型之间的分离,同时仍然保持数据同步。因此,显然没有***需要将数据绑定到域层,相反,
reactive_forms
完全消除了这样做的需要,因为 * 进程 * 是内置的。hgc7kmma2#
更新2022 -reactive_forms_generator发布。reactive_forms的代码生成器。它生成了很多表单功能;一个例子是它将强类型模型绑定到表单。它有一个FormModel:
form
和model
是同步的(model
是一个getter,它通过检索每个表单值来返回强类型模型)。