title: Angular binding object with array from component to view with ngModels
body: <p>I tried to bind my model on my view, but I have a problem when I submit my form : I don't have an array, but many property.</p>
  
  <p>component :</p>
  
  <pre><code>export class QuizFormAddQuestionComponent implements OnInit {
      public question: Question;
  
      constructor() {
          this.question = new Question();
      }
  
      ngOnInit() {
          this.question.setModel({ question: 'test' });
          this.question.setAnswers(3);
      }
  
      createQuestion(form) {
          console.log(form.value);
      }
  
  }
  </code></pre>
  
  <p>my template :</p>
  
  <pre><code>&lt;hello name="{{ name }}"&gt;&lt;/hello&gt;
  
  &lt;div class="row"&gt;
      &lt;div class="col-sm-1"&gt;&lt;/div&gt;
      &lt;div class="col-sm-10"&gt;
  
          &lt;form #form="ngForm" (ngSubmit)="createQuestion(form)" class="mt-4"&gt;
              &lt;div class="form-row"&gt;
                  &lt;div class="form-group col-md-12"&gt;
                      &lt;label for="question" class="col-form-label"&gt;Question&lt;/label&gt;
                      &lt;input type="text"
                             class="form-control"
                             id="question"
                             placeholder="Enter your question..."
                             name="question"
                             [ngModel]="question.question"
                             required&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-group row" *ngFor="let answer of question.answers; let i = index;"&gt;
                  &lt;div class="col-sm-12"&gt;
                      &lt;div class="form-check"&gt;
                          &lt;label class="form-check-label"&gt;
                              &lt;input class="form-check-input"
                                     type="checkbox"
                                     id="answer-value-{{i}}"
                                     [ngModel]="question.answers[i].value"
                                     name="answers[{{i}}].value"&gt;
                              Answer {{ i }}
                          &lt;/label&gt;
                      &lt;/div&gt;
                      &lt;input type="text"
                             class="form-control"
                             id="answer-text-{{i}}"
                             [ngModel]=question.answers[i].text
                             name="answers[{{i}}].text"&gt;
                             {{ answer.getManipulateObjet() }}
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-row"&gt;
                  &lt;div class="form-froup col-md-12 text-right"&gt;
                      &lt;button type="submit" class="btn btn-primary"&gt;Add question&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>question.ts (model)</p>
  
  <pre><code>import { Answer } from "./answer";
  
  export class Question {
  
      constructor(private question: string          = '',
                  private answers: any[]            = [],
                  private more_informations: string = '',
                  private difficulty: number        = 0,) {
      }
  
      setModel(obj) {
          Object.assign(this, obj);
      }
  
      addAnswer() {
          let new_answer = new Answer();
  
          new_answer.setModel({ text: 'test', value: false });
  
          this.answers.push(new_answer);
      }
  
      setAnswers(number_answers) {
          for (let i = 0; i &lt; number_answers; i++) {
              this.addAnswer();
          }
  
          console.log(this);
      }
  
  }
  </code></pre>
  
  <p>answer.ts (model)</p>
  
  <pre><code>export class Answer {
  
      constructor(private text: string  = '',
                  private value: boolean = false,) {
      }
  
      setModel(obj) {
          Object.assign(this, obj);
      }
  
      getManipulateObjet() {
        return '=== call getManipulateObjet() for example : return more information after manipulating object, count value properties, concat, etc... ===';
      }
  
      getCount() {
        // ....
      }
  
      getInspectMyObject() {
        // ...
      }
  }
  </code></pre>
  
  <p>initial object :</p>
  
  <p><a href="https://i.stack.imgur.com/gjJhS.png" rel="noreferrer"><img src="https://i.stack.imgur.com/gjJhS.png" alt="enter image description here"></a></p>
  
  <p>console after submit :</p>
  
  <p><a href="https://i.stack.imgur.com/kbuzf.png" rel="noreferrer"><img src="https://i.stack.imgur.com/kbuzf.png" alt="enter image description here"></a></p>
  
  <p><strong>After the submit I would like the same things as the initial object (same structure with the data updated), the same data structure before and after submit</strong></p>
  
  <p>I tried this on in my view, but it doesn't work :</p>
  
  <pre><code>&lt;div class="form-group row" *ngFor="let answer of question.answers; let i = index;"&gt;
      &lt;div class="col-sm-12"&gt;
          &lt;div class="form-check"&gt;
              &lt;label class="form-check-label"&gt;
                  &lt;input class="form-check-input"
                         type="checkbox"
                         id="answer-value-{{i}}"
                         [ngModel]="answer.value"
                         name="answer[{{i}}].value"&gt;
                  Answer {{ i }}
              &lt;/label&gt;
          &lt;/div&gt;
          &lt;input type="text"
                 class="form-control"
                 id="answer-text-{{i}}"
                 [ngModel]=answer.text
                 name="answer[{{i}}].text"&gt;
                 {{ answer.getManipulateObjet() }}
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I transform in the *ngFor <strong>[ngModel]=question.answers[i].text</strong> by <strong>[ngModel]="answer.text"</strong>, but I have the same problem...</p>
  
  <p>I tried many things from differents posts : <a href="https://stackoverflow.com/questions/40207746/angular-2-form-with-array-of-object-inputs">Angular 2 form with array of object inputs</a>, <a href="https://stackoverflow.com/questions/40314732/angular-2-2-way-binding-with-ngmodel-in-ngfor">Angular 2 - 2 Way Binding with NgModel in NgFor</a></p>
  
  <p>But always many properties and no array</p>
  
  <p><strong>I would like to do this without reactive form, only template driven</strong></p>
  
  <blockquote>
    <p>Demo:</p>
  </blockquote>
  
  <p><a href="https://angular-by7uv1.stackblitz.io/" rel="noreferrer">https://angular-by7uv1.stackblitz.io/</a></p>
  
  <p>I would like to use different function from my object 'answer', for example : answer.getInformation(), getCount(), getInspectMyObject() etc.. to iterate on my object only, in my view. This function is provided by my model 'Answer' to have a clean code in my view. I would like use many functions from my model in the *ngFor. If I use the reactive form, I can't use different function from my model because the "link" between my parent object and my childs is broken.</p>
  
  <blockquote>
    <p>SOLVED</p>
  </blockquote>
  
  <p><a href="https://fom-by-template-driven.stackblitz.io" rel="noreferrer">https://fom-by-template-driven.stackblitz.io</a></p>