угловые 5 выпадающих сохраняют значения

Question

Я пытаюсь создать несколько полей одним нажатием кнопки.Поля генерируются нормально, но выпадающий список в сгенерированных полях не сохраняет выбранные значения.Они помещаются в массив, но значения не отображаются в форме.Код выглядит следующим образом.

app.component.html

---

<form #formRef="ngForm">
  <div *ngFor="let test of mytest; let in=index" class="col-sm-3">
      <div class="form-group"  >
        <select  name="fe[in]" class="form-control" [(ngModel)]="test.name" >
          <option  *ngFor="let f of fields" [value]="f">{{f}}</option>
        </select>
        <br>
        <select name="ty[in]" class="form-control" [(ngModel)]="test.type"> 
          <option  *ngFor="let ty of types" [value]="ty">{{ty}}</option>
        </select><br>
        <input type="text" [(ngModel)]="test.placeholder" name="name{{in}}" class="form-control" #name="ngModel" required />
        <br>
        <input type="text" [(ngModel)]="test.values" name="name{{in}}" class="form-control" #name="ngModel" />
      </div>
      <br />
  </div>
  <button [disabled]="!formRef.form.valid" (click)="add([in])">Add input</button>
</form>
<br />
<br />
{{ mytest | json}}

app.component.ts

---

import { Component } from "@angular/core";
import { test } from './test';

  @Component({
  selector: "app-root",
  templateUrl: './app.component.html'
})
export class AppComponent {
  mytest: test[] = [];
  fields: string[] = ['First Name','Last Name','Email Address','Address1 ','Address2 ','City','Postal Code','Province']
  types: string[] = ['text','email','password','dropdown','radio button','check boxes'];

  add(val) {

    this.mytest.push({name: '',type: '',placeholder:'',values:''});

  }
}

Answer 1

Имеет отношение к имени элемента управления:

<select name="ty[in]"

изменить это на: например

<select [name]="'f' + in"

Чем это работает: https://stackblitz.com/edit/angular-5-dropdown-retain-values?file=src%2Fapp%2Fapp.component.html