Bind array from a json object to a form using ngModel in Angular2
<p>I have a form to create a "question", which is an object containing an array of strings for answers. My issue is that I can’t find a way to bind those answers to the question model</p>

<p>A naive implemenation would be:</p>

<pre><code>import { Component  } from '@angular/core';
class Question {
  question: string;
  answers: Array&lt;string&gt;;
}

@Component({
  selector: 'app',
  template: `
&lt;input type="text" [(ngModel)]="question.question"&gt;
&lt;input type="text" *ngFor="let answer of question.answers" [(ngModel)]="answer"&gt;
`
})

export class AppComponent {
  question: Question = new Question;
  question.answers = new Array(4);
  constructor(){};
}
</code></pre>

<p>Issue is on the second <code>ngModel</code>. 
With this solution I get the error:</p>

<pre><code>zone.js:388 Unhandled Promise rejection: Cannot assign to a reference or variable! ; Zone: &lt;root&gt; ; Task: Promise.then ; Value: Error: Cannot assign to a reference or variable!
</code></pre>

<p>I guess we can’t bind a generated value from an ngFor to a model.</p>

<p>I also tried these options:</p>

<ul>
<li><code>[(ngModel)]="question.answers[index]"</code> -> With this I added <code>let index=index;</code> on <code>ngFor</code> and a corresponding name to the input. Here I have the error I’m describing on the next paragraph</li>
<li><code>[(ngModel)]="question.answers[]</code> -> Trying to do the same you do using pure HTML. This doesn’t work at all</li>
</ul>

<p>None of these worked as I expected: when you change value on an input it seems to reload the ngFor loop. And when I extended my solution to allow user to append or delete an answer, adding an answer would delete content of the first one.</p>