title: Angular 6 Reactive Forms - Set the selected <option> of a <select> FormControl dynamically by condition
body: <p>I need to know how I set the selected <code>&lt;option&gt;</code> of a <code>&lt;select&gt;</code> FormControl dynamically by condition.</p>
  
  <p>Let’s say we have customers with orders. There is a dropdown menu where we select a customer and depending on that customer the options for the orders dropdown menu should be set dynamically and a specific order should be selected.</p>
  
  <p>Also both dropdown menus have an <code>&lt;option&gt;</code> “(new customer/order)” in case there is not yet a customer or an order, so if we route to that form without having a customer, this “new” option should be selected in both drop down menus. If we have a customer without orders, the “new” option should be selected in the orders dropdown menu.</p>
  
  <p>This is the form.component.html:</p>
  
  <pre><code>&lt;form [formGroup]="customerForm"&gt;
      &lt;select formControlName="customers"&gt;
          &lt;option&gt;(new customer)&lt;/option&gt;
          &lt;option [ngValue]="customer" *ngFor="let customer of customers"&gt;
              {{customer.name}}
          &lt;/option&gt;
      &lt;/select&gt;
      &lt;select formControlName="orders"&gt;
          &lt;option&gt;(new order)&lt;/option&gt;
          &lt;option [ngValue]="order" *ngFor="let order of filteredOrders"&gt;
              {{order.id}}
          &lt;/option&gt;
      &lt;/select&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>This is the form.component.ts:</p>
  
  <pre><code>customerForm: FormGroup;
  
  customers: Customer[] = [
  {   "id": 1,
      "name": "Meghan Castellano",
      "orderIds": [1,2] },
  {   "id": 2,
      "name": "Monika Weiss",
      "orderIds": [3,4] }];
  
  orders: Order[] = [{"id": 1},{"id": 2},{"id": 3},{"id": 4}];
  
  filteredOrders: Order[];
  
  constructor( private route: ActivatedRoute,
              private fb: FormBuilder) {}
  
  ngOnInit() {
      this.customerForm = this.fb.group({
          customers: '',
          orders: '' });
  
      let customerId = this.route.snapshot.getParam('id');
  
      if (customerId == 0) {
          this.customerForm.patchValue({
              customers: "(new customer)",
              orders: "(new order)" });
      }
      else
      {
          let customer = this.customers[customerId];
  
          this.customerForm.patchValue({ customers: customer.name });
  
          if (customer.orderIds.length != 0) {
              this.filteredOrders = getCustomersOrders(customer);
  
          this.customerForm.patchValue({
              orders: this.filteredOrders[0].id }
          }
      }
  }
  
  getCustomersOrders(customer: Customer): Order[] {
      let orders: Order[];
  
      for (var id = 0; id &lt; customer.orderIds.length; id++) {
          let orderId = customer.orderIds[id];
          let order = this.orders.find(i =&gt; i.id == orderId);
          orders.push(order); }
  
      return orders;
  }
  </code></pre>
  
  <p>Currently I'm routing to the form and provide an id with the url. The customer dropdown menu selects the correct customer depending on the id in the url.</p>
  
  <p>However, the order dropdown menu is only populated correctly, but the selection does not work. No option at all is selected.</p>
  
  <p>If I replace the value in this statement:</p>
  
  <p><code>this.customerForm.patchValue({ orders: this.filteredOrders[0].id }</code></p>
  
  <p>with the <code>"(new order)"</code> string already specified in the html:</p>
  
  <p><code>this.customerForm.patchValue({ order: "(new order)" })</code></p>
  
  <p>it works. The string <code>"(new order)"</code> is selected in the orders dropdown menu. It just don't work for the filteredOrders.</p>
  
  <p>What am I doing wrong here? Do I maybe need a whole different approach here?</p>