When using formBuilder array with control flow for loop syntax how should you track the array...

I've got this FormBuilder code:

private readonly fb: FormBuilder = inject(FormBuilder)

myForm = this.fb.group({
extras: this.fb.array([
['', Validators.required],
]),
})


Iterating over this array in the template I have:

<form [formGroup]="myForm">
<ng-container formArrayName="extras">
@for (extra of extras.controls; track extra) {
<div>
<label for="extra-{{ $index }}">Extra {{ $index + 1 }}</label>
<input id="extra-{{ $index }}" [formControlName]="$index">
</div>
}
</ng-container>
</form>


My question is concerning this line:

@for (extra of extras.controls; track extra) { /* blah blah */ }


Is track extra best practice or should I track by something else? e.g. track extra.something.else? TIA

Continue reading...