Flutter 如何在颤振中使用反应形式？

我试着在颤振中创建动态的场阵列，反应形式是最好的选择。但是没有我需要使用的关于ReactiveFormArray的文档

---

做了一些尝试和错误，并找到了使用它的方法。下面是答案。

因为我找不到任何文档。分享，以便对某人有用

1.使用FormArray创建一个反应式表单

如果默认情况下需要，也可以在formarray中添加formgroup

    final form = FormGroup({
        'itemName': FormControl(value: ''),
        'prices': FormArray([]),
      });

2.获得正式订单 我们将使用此列表动态添加多个表单组

    FormArray get pricesList => form.control('prices') as FormArray;

3.在init方法中初始化数据 动态添加表单数组数据

    @override
      void initState() {
        pricesList.add(FormGroup({
          'greaterThan': FormControl<int>(value: 0),
          'lessThan': FormControl<int>(value: 10),
          'price': FormControl<int>(value: 0),
        }));
        super.initState();
      }

@覆盖
void initState（）{
价格列表。添加（FormGroup({
“greaterThan”：FormControl（值：0），
“lessThan”：FormControl（值：10），
“价格”：FormControl（值：0），
}));
super.initState（）；
}

加载项反应表单 将表单返回到您的小部件

ReactiveForm(
formGroup:this.form，
子：列(
儿童：[
反应文本字段(
formControlName:'itemName'，
装饰：输入装饰(
labelText:“项目名称”，
),
),
反应阵列(
格式名称：“价格”，
生成器：（上下文、格式、子级）{
最终城市=价格列表控制
.map（（控件）=>控件作为表单组）
.map（（当前表单）{
返回反应形式(
formGroup:currentform，
子：列(
儿童：[
反应文本字段(
formControlName:'大于'，
装饰：输入装饰(
labelText:'大于'，
),
),
反应文本字段(
formControlName:'lessThan'，
装饰：输入装饰(
labelText:'小于'，
),
),
反应文本字段(
formControlName:'价格'，
装饰：输入装饰(
标签文字：“价格”，
),
),
],
));
});
回程包装(
运行间距：20，
儿童：城市。toList（），
);
}),
反应型消费者(
生成器：（上下文、窗体、子对象）{
返回上升按钮(
子项：文本（'Submit'），
onPressed:form.valid？\u onSubmit:null，
);
},
),
],
),
),
));

动态添加表单数组 调用此方法时，将动态添加更多formarray字段

addFormArray（）异步{
价格列表。添加（FormGroup({
“greaterThan”：FormControl（值：10），
“lessThan”：FormControl（值：50），
“价格”：FormControl（值：0），
}));
setState（（）{}）；
}

只需单击按钮或在任何需要的地方调用此方法

    ReactiveForm(
                  formGroup: this.form,
                  child: Column(
                    children: <Widget>[
                      ReactiveTextField(
                        formControlName: 'itemName',
                        decoration: InputDecoration(
                          labelText: 'Item Name',
                        ),
                      ),
                      ReactiveFormArray(
                          formArrayName: 'prices',
                          builder: (context, formArray, child) {
                            final cities = pricesList.controls
                                .map((control) => control as FormGroup)
                                .map((currentform) {
                              return ReactiveForm(
                                  formGroup: currentform,
                                  child: Column(
                                    children: <Widget>[
                                      ReactiveTextField(
                                        formControlName: 'greaterThan',
                                        decoration: InputDecoration(
                                          labelText: 'greater than',
                                        ),
                                      ),
                                      ReactiveTextField(
                                        formControlName: 'lessThan',
                                        decoration: InputDecoration(
                                          labelText: 'less than',
                                        ),
                                      ),
                                      ReactiveTextField(
                                        formControlName: 'price',
                                        decoration: InputDecoration(
                                          labelText: 'Price',
                                        ),
                                      ),
                                    ],
                                  ));
                            });
                            return Wrap(
                              runSpacing: 20,
                              children: cities.toList(),
                            );
                          }),
                      ReactiveFormConsumer(
                        builder: (context, form, child) {
                          return RaisedButton(
                            child: Text('Submit'),
                            onPressed: form.valid ? _onSubmit : null,
                          );
                        },
                      ),
                    ],
                  ),
                ),
              ));

    addFormArray() async {
        pricesList.add(FormGroup({
          'greaterThan': FormControl<int>(value: 10),
          'lessThan': FormControl<int>(value: 50),
          'price': FormControl<int>(value: 0),
        }));
        setState(() {});
      }