Angular reactive form hidden input not binding?

Question

I have a reactive form where I create the controls from my data model. Initially, everything is sorted by a datapoint called the \"processingOrder\" in numerical order.

Answer 1

formControlName directive has ngModel input which is bound to control's model and when changed from the code will update all its instances on view. So, just replace [value]="i" with [ngModel]="i + 1":

binding to HTML input's property value ([value]="i + 1") will update current input on the view but won't update control's model, thus won't affect another instances with the same control name.

You also can remove hidden input and place [value]="i + 1" on the text input:

please note that processingOrder value will always be overridden by ngFor's index i