title: Implementing dropdown list in Form builder, angular 5
body: <p>I wanted to implement a dropdown list, instead of typing value, so I've created a class</p>
  
  <pre><code>export class Roles {
  id: number;
  name: string;
  }
  </code></pre>
  
  <p>And imported it in my app.component.ts</p>
  
  <pre><code> roles: Roles[] = [
      { id: 1, name: 'Org manager' },
      { id: 2, name: 'Supervisor' },
      { id: 3, name: 'Member' }
   ];
  </code></pre>
  
  <p>And in my app.component.html</p>
  
  <pre><code>         &lt;div class="form-group" [ngClass]="displayFieldCss('Email')"&gt;
                  &lt;label for="Email" class="control-label 
           required"&gt;Email&lt;/label&gt;
                  &lt;input type="text" id="Email" class="form-control" 
         formControlName="Email"&gt;
            &lt;/div&gt;
  
       &lt;div class="form-group" [ngClass]="displayFieldCss('RoleId')"&gt;
                  &lt;label for="RoleId" class="control-label" 
       formControlName="RoleId"&gt;Role&lt;/label&gt;
                  &lt;select id="RoleId"  formControlName="RoleId"  class="form-
       control"&gt;
                      &lt;option *ngFor="let r of roles" [value]="r.id"&gt;
                          {{r.name}}
                      &lt;/option&gt;
                 &lt;/select&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>Noted that I had a function form, where the roles were typed, but that's not solution, so I'm trying to figure out how to implement Role.Id in my form builder, I'm using angular reactive forms...</p>
  
  <pre><code>    ngOnInit() { 
  
      this.form = this.formBuilder.group({
          Email: [null, [Validators.required, Validators.email]],
          RoleId: [null, Validators.required],
  
  
      });
  
  }
  </code></pre>
  
  <p>Am I on the right course, what should I do to get my RoleId in my formBuilder get the value of selected option in the dropdown list? </p>
  
  <p>Is there a way I can implemented it since I send an object like this, to my form to submit? </p>
  
  <p>I have a class </p>
  
  <pre><code>export class employee {
  
  Id: string; 
  Email: string;
  RoleId: string;
  
  }
  </code></pre>
  
  <p>And in app.component.ts 
          Demoemployee: employee;</p>
  
  <pre><code>    GetDemoObject(myForm: NgForm): employee { this.Demoemployee = new 
      employee; this.Demoemployee.Email = myForm.value.Email; 
      this.Demoemployee= myForm.value.RoleId; return this.Demoemployee; }
  </code></pre>