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":

<input type="hidden" formControlName="processingOrder" [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:

<input type="text" 
       placeholder="Processing Order" 
       [ngModel]="i + 1"
       formControlName="processingOrder"/>

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

Answer 2

Add this to the bottom of the move up/down handling method,

move(shift, currentIndex) {
  const rules = this.rulesForm.get(['ruleData', 'rules']);

  let newIndex: number = currentIndex + shift;
  if(newIndex === -1) {
    newIndex = rules.length - 1;
  } else if(newIndex == rules.length) {
    newIndex = 0;
  }

  const currentGroup = rules.at(currentIndex);
  rules.removeAt(currentIndex);;
  rules.insert(newIndex, currentGroup)

  // logic to re-calculate processingOrder in the correct ascending order
  let i = 0;
  this.rulesForm.get(['ruleData', 'rules']).controls.forEach((elem) => {
    i++;
    elem.get('processingOrder').setValue(i);
  });
}

It basically re-assigns the processingOrder numbers in ascending order based on the formArray length. Hope it helps. (Confirmed it working in plunker)

You don't need the hidden input in the template for this to work. Also, if you specify more than one input controls (here input elements of type 'text' and 'hidden' for 'processingOrder') with the same formControlName then it probably is not gonna work as you expect in a reactive form.