将选择列表与FormBuilder Angular 2绑定 [英] Bind Select List with FormBuilder Angular 2

问题描述

在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>                            

解决方案

您需要将选择值初始化为'value'，而不是文本:

'type': ['Non-LDAP']

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>                            

解决方案

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

'type': ['Non-LDAP']

这篇关于将选择列表与FormBuilder Angular 2绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！