angular2 capture info from dynamically generated inputs - possible?

Question

Working on an update form which I would like to generate and capture inputs for a variable sized array

The current unhappy version only supports the first three statically defined elements in the constituency array. So the inputs look like this...

  <input #newConstituency1 class="form-control" value={{legislatorToDisplay?.constituency[0]}}>
  <input #newConstituency2 class="form-control" value={{legislatorToDisplay?.constituency[1]}}>
  <input #newConstituency3 class="form-control" value={{legislatorToDisplay?.constituency[2]}}>

and the function to update pulls the values of the form using the static octothorpe tags.

updateLegislator(newConstituency1.value,  newConstituency2.value,  newConstituency3.value)

But this doesn't allow for a variable sized Constituency array.

I am able to use *ngFor directive to dynamically create input fields for a theoretically infinitely sized constituency array:

<div *ngfor constit of legislatorToDisplay?.constituency>
  <input value={{constit}}>
</div>

but have not successfully been able to capture that information thereafter. Any kind assistance would be greatly appreciated.

Answer 1

Use two-way data binding:

<div *ngFor="constit of legislatorToDisplay?.constituency; let i = index">
  <input [(ngModel)]="legislatorToDisplay?.constituency[i]">
</div>

Answer 2

You just have to have a form object in your component that matches the HTML input components that were created.

Template

<div *ngfor constit of legislatorToDisplay?.constituency>
  <input value={{constit}} formControlName="{{constit}}">
</div>

Component

/* create an empty form then loop through values and add control
  fb is a FormBuilder object. */
let form = this.fb.group({});
for(let const of legislatorToDisplay.constituency) {
     form.addControl(new FormControl(const))
}