title: Angular bind 2 select dropdowns to object and store only the selected value
body: <p>In my Angular component I'm using 2 html select dropdowns. The model dropdown shows the models of the selected brand above. Currently the problem is that I want to store both as string but in code I get the whole object from brand dropdown. If I change <code>ngValue</code> of brand into <code>[ngValue]="brand.name"</code>, the bind with the model select will not work anymore. Currently the selected car brand is on submit of my form stored as the brand object and the car model stored as a string.</p>
  
  <p>How can I select a model of the selected brand and also store the brand as string?</p>
  
  <p>This is my code</p>
  
  <pre><code>&lt;form *ngIf="car" #carEditForm="ngForm" name="form" (ngSubmit)="carEditForm.form.valid 
  &amp;&amp; onSubmit()"&gt;
      &lt;label for="brand"&gt;Car brand&lt;/label&gt;
      &lt;select class="form-control" [(ngModel)]="car.brand" name="brand" required&gt;
          &lt;option *ngFor="let brand of brands" [ngValue]="brand"&gt;{{ brand.name }}&lt;/option&gt;
      &lt;/select&gt;
      &lt;label for="model"&gt;Model&lt;/label&gt;
      &lt;select *ngIf="car.brand" [(ngModel)]="car.model" class="form-control" name="model" 
       required&gt;
          &lt;option *ngFor="let model of car.brand.models" value="{{ model }}"&gt;
              {{ model }} 
          &lt;/option&gt;
      &lt;/select&gt;
      ...
  &lt;/form&gt;
  </code></pre>
  
  <p>And the classes:</p>
  
  <pre><code>export class Car {
    key: string
    brand: string
    model: string
  }
  
  export class Brand {
    key: string
    name: string
    models: []
  }
  </code></pre>
  
  <p>Edit: Solution in comments</p>