使用FormBuilder Angular 2绑定选择列表

Question

在Angular 2中,创建一个简单的应用程序但是当在选择列表的情况下使用DOM控件附加formBuilder时,第一个选项变为空白 - 即使我在formBuilder中提供了一些初始值,该值不是来自DOM元素

在FomBuilder之前

选择列表
Genral
LDAP

在FomBuilder之后

选择List
No选项最初出现
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);
     }

文件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

您需要将选择值设置为"值",而不是文本:

'type': ['Non-LDAP']