FormArray.removeAt does not remove the expected element. Instead, it just changes the ".length" prop's value.

[thanhtunguet]

Environment

Package version: 17.0.x

Flutter doctor

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.24.5, on macOS 15.1.1 24B91 darwin-arm64, locale en-VN)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 16.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2024.2)
[✓] IntelliJ IDEA Ultimate Edition (version 2024.3)
[✓] Connected device (6 available)            
    ! Error: Browsing on the local area network for iPad Gen 9. Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac.
      The device must be opted into Developer Mode to connect wirelessly. (code -27)
[✓] Network resources

• No issues found!

Code sample

import 'package:flutter/material.dart';
import 'package:reactive_forms/reactive_forms.dart';

class TestWidget extends StatefulWidget {
  @override
  _TestWidgetState createState() => _TestWidgetState();
}

class _TestWidgetState extends State<TestWidget> {
  // Initialize the form group with a form array
  final FormGroup form = FormGroup({
    'elements': FormArray<String>([]),
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Test Widget'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: ReactiveForm(
          formGroup: form,
          child: Column(
            children: [
              // Render each element in the FormArray as a TextFormField
              ReactiveFormArray(
                formArrayName: 'elements',
                builder: (context, formArray, child) {
                  return Column(
                    children: [
                      for (int i = 0; i < formArray.controls.length; i++)
                        Row(
                          children: [
                            Expanded(
                              child: ReactiveTextField<String>(
                                formControlName: i.toString(),
                                decoration: const InputDecoration(
                                  labelText: 'Element',
                                ),
                              ),
                            ),
                            IconButton(
                              icon: const Icon(Icons.delete),
                              onPressed: () {
                                (formArray as FormArray<String>).removeAt(i);
                              },
                            ),
                          ],
                        ),
                    ],
                  );
                },
              ),
              const SizedBox(height: 16.0),
              ElevatedButton(
                onPressed: () {
                  // Add a new element to the FormArray
                  (form.control('elements') as FormArray<String>).add(
                    FormControl<String>(),
                  );
                },
                child: const Text('Add Element'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

void main() => runApp(MaterialApp(home: TestWidget()));

Description

Adding 3 text fields, input different values for each of them. For example: 1, 2, 3

Expected behavior: When press remove button of (2), expect that the second element will be removed

Current behavior: The last element always be removed. The array length has been updated but the formArray value still be the same.

Steps to reproduce

1. Add 3 elements
2. Input different value for each element
3. Remove the first or second element

Images

Stacktrace/Logcat

[vasilich6107]

you need to use key on text field key: ObjectKey(formArray.controls[i])