typescript - 使用 FormBuilder Angular 2 绑定(bind)选择列表

Question

在 Angular 2 中，创建一个简单的应用程序，但是当 formBuilder 附加到 DOM 控件时，第一个选项将变为空白 - 即使我在 formBuilder 中提供了一些初始值，该值也不会进入 DOM 元素

在 FomBuilder 之前

选择列表
将军
LDAP

在 FomBuilder 之后

选择列表
最初没有出现选项
将军
LDAP

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