reactive_forms Flutter - 创建和渲染组

Posted 2023-03-07

【中文标题】reactive_forms Flutter - 创建和渲染组

【英文标题】：reactive_forms Flutter - creating and rendering Groups

【发布时间】：2021-02-11 15:27:26

【问题描述】：

难以确定如何将组作为示例呈现 (https://github.com/joanpablo/reactive_forms#groups-of-groups-grin)：

final form = FormGroup(
  'personal': FormGroup(
    'name': FormControl<String>(validators: [Validators.required]),
    'email': FormControl<String>(validators: [Validators.required]),
  ),
  'phone': FormGroup(
    'phoneNumber': FormControl<String>(validators: [Validators.required]),
    'countryIso': FormControl<String>(validators: [Validators.required]),
  ),
  'address': FormGroup(
    'street': FormControl<String>(validators: [Validators.required]),
    'city': FormControl<String>(validators: [Validators.required]),
    'zip': FormControl<String>(validators: [Validators.required]),
  ),
);

我正在使用

ReactiveTextField(formControlName: 'personal', ),

但抛出错误：

Expected a value of type 'FormControl<dynamic>', but got one of type 'FormGroup'

我的目标是得到如下输出：

  "personal": 
    "name": "...",
    "email": "..."
  ,
  "phone": 
    "phoneNumber": "...",
    "countryIso": "..."
  ,
  "address": 
    "street": "...",
    "city": "...",
    "zip": "..."
  

非常感谢任何指导和建议！

【参考方案1】：

得到了 joanpablo (https://github.com/joanpablo) 的建议

可以使用以下语法：

ReactiveTextField(formControlName: 'personal.name', ),

上面的代码是在你有一个 ReactiveForm（或一个 ReactiveFormBuilder）的情况下，作为一个孩子你有这个 ReactiveTextField：

ReactiveForm(
   formGroup: form,
   child: Column(children: [
      ReactiveTextField(
         formControlName: 'personal.name', 
      ),
   ]),
),

但你也可以有嵌套的 ReactiveForm 小部件：

ReactiveForm(
   formGroup: form,
   child: Column(children: [
      ReactiveForm(
         formGroup: form.control('personal') as FormGroup,
            child: Column(children: [
               ReactiveTextField(
                  formControlName: 'name', 
               ),
            ]),
         ),
   ]),
),