reactive_forms Flutter - creating and rendering Groups - forms

Question

Having difficulty figuring how to render groups as their example (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]),
}),
});
Im using
ReactiveTextField(formControlName: 'personal', ),
but throws error:
Expected a value of type 'FormControl<dynamic>', but got one of type 'FormGroup'
My aim is to get output like below:
{
"personal": {
"name": "...",
"email": "..."
},
"phone": {
"phoneNumber": "...",
"countryIso": "..."
},
"address": {
"street": "...",
"city": "...",
"zip": "..."
}
}
Any guidance and advice is much appreciated!

Answer 1

Got advice from joanpablo (https://github.com/joanpablo)
Below syntax can be used:
ReactiveTextField(formControlName: 'personal.name', ),
The above code is in case you have for example a ReactiveForm (or a ReactiveFormBuilder) and as a child you have this ReactiveTextField:
ReactiveForm(
formGroup: form,
child: Column(children: [
ReactiveTextField(
formControlName: 'personal.name',
),
]),
),
But you can also have nested ReactiveForm widgets:
ReactiveForm(
formGroup: form,
child: Column(children: [
ReactiveForm(
formGroup: form.control('personal') as FormGroup,
child: Column(children: [
ReactiveTextField(
formControlName: 'name',
),
]),
),
]),
),