flutter - 如何在flutter中使用reactive_forms ReactiveFormArray？

Question

我试图在颤动中创建动态字段数组，reactive_forms 是最佳选择。但是没有我需要使用的 ReactiveFormArray 的文档。

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

Answer 1

由于我找不到任何文档。分享，所以它可能对某人有用。

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

如果您默认需要，您也可以在表单数组中添加表单组。

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

2.获取FormArray 我们将使用这个列表来动态添加多个表单组。

    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();
      }

4. 添加 ReactiveForm 将表单返回到您的小部件

    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,
                          );
                        },
                      ),
                    ],
                  ),
                ),
              ));

5. 调用该方法时动态添加Form数组，动态添加更多formarray字段

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

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