FormArray insert a FormGroup to an specific index does not work properly

[ngoc-quoc-huynh]

Hey I'm trying to copy a FormGroup in a FormArray if I press a button. Adding a new FormGroup to the array like in the code below works. But if I make a copy by using the insert method with a given index it doesn't work properly. Editing the original FormGroup, will change the value of the copy as well and vice versa. I want to copy a FormGroup in a FormArray and edit only one of them and not both. In this example I copy the first item and put it to index 0.
Example:
[0] - A

• Copy [0]
  [0] - A (new)
  [1] - A (old)
• Edit [0]
  [0] - AB
  [1] - AB <-- Should not change to AB

 FormGroup testtForm({
    String name,
  }) =>
      fb.group(<String, dynamic>{
        'name': <dynamic>[
          name ?? '',
          Validators.required,
        ],
      });

class TestPage extends StatelessWidget {
  static FormArray<dynamic> array = fb.array([testForm()]);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ReactiveFormArray(
          formArray: array,
          builder: (
            BuildContext context,
            FormArray formArray,
            Widget child,
          ) {
            return ListView.separated(
                itemBuilder: (context, index) {
                  return ReactiveForm(
                    formGroup: formArray.controls[index] as FormGroup,
                    child: ReactiveTextField(
                      formControlName: 'name',
                    ),
                  );
                },
                separatorBuilder: (context, index) {
                  return SizedBox(
                    height: 10,
                  );
                },
                itemCount: formArray.controls.length);
          }),
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
            child: Icon(Icons.copy),
            onPressed: () {
              array.insert(
                0,
                  testForm(name: (array.controls[0] as FormGroup).control('name').value as String),
                
              );
            },
          ),
          FloatingActionButton(
            child: Icon(Icons.add),
            onPressed: () {
              array.add(
                testForm(name: (array.controls[0] as FormGroup).control('name').value as String),
              );
            },
          ),
        ],
      ),
    );
  }
}

[joanpablo]

Hi @gucci-quoci,

Thanks for using Reactive Forms and for the issue. If I understand well, the code above actually execute well without problems. Could you please write and example about the code that actually doesn't work, so I can better understand the issue.

Thanks.

[ngoc-quoc-huynh]

Hi @gucci-quoci,

Thanks for using Reactive Forms and for the issue. If I understand well, the code above actually execute well without problems. Could you please write and example about the code that actually doesn't work, so I can better understand the issue.

Thanks.

Hey I added an example. The code above works only for the add button. If I use the copy button it does not work properly.

[ngoc-quoc-huynh]

Hey @joanpablo this is the code, which does not work properly.
Example of an input (Array index - ReactiveTextField value):

• Start
  [0] - A
• Copy [0]
  [0] - A (new)
  [1] - A (old)
• Edit [0]
  [0] - AB
  [1] - AB <-- Should not change to AB

array.insert(0, testForm(name: (array.controls[0] as FormGroup).control('name').value as String));

[joanpablo]

Hi @gucci-quoci,

Sorry for the late answer. The issue there is because of how Flutter handles elements in a list in the UI. If you put a key to all your ReactiveTextField the issue will be resolved.

final group = array.controls[i] as FormGroup;
ReactiveTextField(
   key: ObjectKey(group),
   formControlName: 'name',
),

[ngoc-quoc-huynh]

Hi @joanpablo,
Thank you, I forgot about that.