0

グループを例としてレンダリングする方法を理解するのが難しい（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": "..."
  }
}

ガイダンスやアドバイスをいただければ幸いです。

4

1 に答える 1

0

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', 
               ),
            ]),
         ),
   ]),
),
于 2021-02-11T15:37:39.937 に答える