Can't bind to dynamically added input in Bootstrap modal of Angular component

Question

First of all, I don't see how the modal could have anything to do with this issue since its actually in this component's code, not a child. Still, this is in a modal, just in case.

I'm opting to not use FormArray since I need to keep track of my selections that may be added in a separate object, so I'm just creating unique IDs for the controls and adding them to the FormGroup. I can access the controls in the ts code, set values, get values, etc, but the form isn't binding and I can't figure out why not.

I can have an unknown number of items in this modal form, which will each have a selector (dropdown to select a property) and then the input to be able to modify some data. The input could be of different types, so it needs to be added and binded upon the choice from the selector.

<form [formGroup]="multiEditFormGroup" novalidate>
  <div *ngFor="let item of multiEditSelections; let i = index">
    <div>
      <mdb-select [options]="availablePropsSelect"
        placeholder="Choose property to edit"
        class="colorful-select dropdown-main"
        (selected)="multiEditSelectProp(item.selectorId, $event)"></mdb-select>
      <label>Property to edit</label>
    </div>

    <div>
      <div>
        <input mdbActive
           type="text"
           class="form-control"
           [formControlName]="item.controlId" />
       </div>
     </div>
   </div>
 </form>

Excepts of ts code:

public multiEditFormGroup = new FormGroup({});

onModalOpen():void {

  const selectorId = this.utils.uuid();
  this.multiEditFormGroup.addControl(selectorId, this.propSelector);
  this.multiEditSelections.push({
    selectorId: selectorId,
    prop: '',
    label: '',
    type: '',
    controlId: '' // not yet known since type hasn't been chosen
  });
}

onSelect(selectorId: string, selectEvent: any): void {

  let selection = this.multiEditSelections.find(selection => {
    return selection.selectorId === selectorId;
  });

  const controlId = this.utils.uuid();
  const prop = selectEvent.value;
  this.multiEditFormGroup.get(selection.selectorId).setValue(prop);
  this.multiEditFormGroup.markAsDirty();
  this.multiEditFormGroup.markAsTouched();
  const model = this.multiEditModel.find(model => {
    return model.prop === prop;
  });
  this.multiEditFormGroup.addControl(controlId, this.testCtrl);
  selection.controlId = controlId;
  selection.prop = prop;
  selection.label = model.label;
  selection.type = model.type;
}

Logging to console shows that items are being added to the FormGroup, but the binding isn't happening to the DOM. For example, I can add a (keyup) event handler to my input and set the value in the form control which has already been created, and the FormGroup is updated. However, any input added in the front-end doesn't update the FG since it obviously isn't binding. Is this a timing issue or because the controlId is being updated later? I'm creating the FormControl before updating my array that is being iterated.

Oh and I get no errors in console on this.

Answer 1

I think you need to make this change:

[formControlName]="item.controlId"

needs to be:

formControlName="{{item.controlId}}"