title: How to pass the object value dynamically as parameter into new FormControl() in angular 8
body: <p>I have a dropdown whose data is coming from loop.Here I need to get the selected value and selected text on page load and on click a span.I am using reactive form here.To make default selection I am using new FormControl(1) ,Every thing is working correct I am getting the result in console.But when I am removing first object of array from my json and reload the page its creating error,since I hardcoded to 1 in FormControl,if I change to FormControl(2) its working fine.But I need to pass it dynamically so that it can work with any number of object. Here is the code below and demo example I created <a href="https://stackblitz.com/edit/angular-lwrvvz?file=src%2Fapp%2Fapp.component.ts" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-lwrvvz?file=src%2Fapp%2Fapp.component.ts</a></p>
  
  <h2>app.component.ts</h2>
  
  <pre><code>    import { Component } from '@angular/core';
      import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
      @Component({
        selector: 'my-app',
        templateUrl: './app.component.html',
        styleUrls: [ './app.component.css' ]
      })
      export class AppComponent  {
        name = 'Angular';
        registerForm: FormGroup;
        statusdata: any;
        constructor(private formBuilder: FormBuilder)
        {
            this.registerForm = this.formBuilder.group({
                   title: new FormControl(1)
           });
  
        }
        ngOnInit() {
  
            this.statusdata = [{"groupid":1,"groupname":"project1"},{"groupid":2,"groupname":"project2"},{"groupid":3,"groupname":"project3"}];
            console.log('selected Value', this.registerForm.get('title').value);
            console.log('selected name', this.statusdata.filter(v =&gt; v.groupid == this.registerForm.get('title').value)[0].groupname);
        }
       getSelectedVal(){
          console.log('selected Value', this.registerForm.get('title').value);
          console.log('selected name', this.statusdata.filter(v =&gt; v.groupid == this.registerForm.get('title').value)[0].groupname);
  
       }
      }
  
  app.component.html
  -----------------
  &lt;hello name="{{ name }}"&gt;&lt;/hello&gt;
  &lt;p&gt;
    Start editing to see some magic happenss :)
  &lt;/p&gt;
  &lt;div&gt;
  &lt;form [formGroup]="registerForm"&gt;
  &lt;select formControlName="title" class="form-control"&gt;
  
                          &lt;option *ngFor="let grpdata of statusdata" value="{{grpdata.groupid}}"&gt;{{grpdata.groupname}}&lt;/option&gt;
  
                      &lt;/select&gt;
   &lt;/form&gt;
  &lt;/div&gt;
  &lt;p&gt;home works!&lt;/p&gt;
  &lt;div&gt;&lt;span (click)="getSelectedVal()"&gt;Click here&lt;/span&gt;&lt;/div&gt;
  </code></pre>