title: Angular : manage several unlimited identical form on one page
body: <p>I need to have a page with a form and a button "add" which create one more exact same form (empty one)</p>
  
  <p>I've been struggling with different problems. Here's what I ve done so far:</p>
  
  <pre><code>&lt;form&gt;
      &lt;div *ngFor="let car of cars; let i = index"&gt;
      &lt;label&gt;Brand&lt;/label&gt;
      &lt;input #text="ngModel" type="text" name="brand[i]" [(ngModel)]="car.brand"&gt;
      &lt;label&gt;&lt;/label&gt;
      &lt;input #text="ngModel" type="text" name="size[i]" [(ngModel)]="car.size"&gt;
  &lt;/div&gt;
  &lt;button type="button" (click)="onAddCar(form)"&gt;Add Car&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>my tsFile is something like:</p>
  
  <pre><code>cars : Car[] = [];
  myFirstCar = new Car();
  myFirstCar.brand = '';
  myFirstCar.size = '';
  cars.push(myFirstCar);
  
  
  ngOnInit{
       this.carService.getCars() .subscribe(response =&gt; { this.cars= response; });
  }
  onAddCar() {
      myNewCar = new Car();
      myNewCar.brand = '';
      myNewCar.size = '';
  cars.push(myNewCar);
  </code></pre>
  
  <p>Here are my problems:</p>
  
  <ul>
  <li>when I get my cars on Init. No matter how big is my list, the same car is displayed all the time</li>
  <li>when I press add Car, all the fields get set to null instead of keeping what I ve done so far.</li>
  </ul>
  
  <p>How could I do ?</p>