Flutter-将表单绑定到模型

debugcn 发表于 Dev

本杰明·巴金斯（Benjamin Baggins）

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

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

还是这不是Flutter要做的事情？

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

费迪南德

从我reactive_forms在in flutter中的使用来看，我没有看到与之等效的东西ngModel。这是因为像这样ReactiveTextField的元素设计为具有小部件的双重绑定功能（双向绑定）

这就是为什么您不包含像onChangedngModel方法之类的属性的原因#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消除了需要做的全部，因为过程是内置的。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。