2016-07-09 4 views
3

В Angular 2, создавая простое приложение, но когда formBuilder подключен с контролем DOM в случае выбора списка, первый параметр становится пустым - даже если я предоставил некоторое начальное значение в formBuilder, это значение равно не подходит к DOM элементуBind Select List with FormBuilder Angular 2

Перед FomBuilder

Выберите список
Genral
LDAP

После FomBuilder

Выберите Список
Нет опции появляется первоначально
Genral
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 - f orm.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>        
+0

' 'типа': [ 'General']' – micronyks

+0

Нет мой друг - Вначале все же выбранный список пуст, я уже пробовал это, поскольку это дает начальное значение DOM, но не работает –

ответ

6

Вы должны начать выберите значение 'значение', а не текст:

'type': ['Non-LDAP']