forms - reactive_forms Flutter - 创建和渲染组

Question

难以弄清楚如何将组作为他们的示例（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": "..."
  }
}

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

Answer 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', 
               ),
            ]),
         ),
   ]),
),