Bind Select List with FormBuilder Angular 2

Question

In Angular 2, creating a simple app but when formBuilder is attached with DOM control in case of select list , First option is coming blank - even if I provided some initial value in formBuilder that value is not coming to DOM element

Before FomBuilder

Select List
Genral
LDAP

After FomBuilder

Select List
No option appearing initially
Genral
LDAP

File 1 - form.component.ts

import { Component } from '@angular/core';
import { FormBuilder, Validators, REACTIVE_FORM_DIRECTIVES, FormGroup, FormControl } from '@angular/forms';

@Component({

        moduleId : module.id,
        selector : 'login',
        templateUrl : 'login.component.html',
        directives : [ REACTIVE_FORM_DIRECTIVES ],
})

export class LoginComponent{

        loginForm : FormGroup;

        constructor(private _router:Router,private _fb:FormBuilder){

                this.loginForm = _fb.group({
                    'username' : ['aa',[Validators.required]],
                    'password'  : ['',[Validators.required]],
                    'type'  : ['']
                })            
        }
      }

     loginUser(){
        console.log("Form is  = ",this.loginForm.controls);
     }

File 2 - form.component.html

        <form  [formGroup]="loginForm" id="form-login"(submit)="loginUser()">
            <div class="form-group">
                <div class="col-xs-12">
                    <div class="input-group">
                        <input  formControlName="username" type="text" id="login-username">                                
                    </div>                               
                </div>                        
            </div>
            <div class="form-group">
                <div class="col-xs-12">
                    <div class="input-group">
                        <input formControlName="password" type="password" id="login-password">
                    </div>     
                </div>                                                                                                                                
            </div>
            <div class="form-group">
                <div class="col-xs-12">
                    <div class="input-group">
                        <select formControlName="type" class="form-control input-lg" id="login-type">
                            <option value="Non-LDAP">General</option>                
                            <option value="LDAP">LDAP</option>                                    
                        </select>
                    </div>
                </div>                                                                                                                                
            </div>                   
            <button type="submit" class="btn btn-sm btn-primary">Login to Dashboard</button>                            

Answer 1

You need to initiate the select value to 'value', not the text:

'type': ['Non-LDAP']