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

查看：32
本文介绍了使用 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';@成分({模块 ID : 模块.id,选择器:'登录'，templateUrl : 'login.component.html',指令:[ REACTIVE_FORM_DIRECTIVES ]，})导出类 LoginComponent{登录表单:表单组；构造函数(私有_router:路由器，私有_fb:FormBuilder){this.loginForm = _fb.group({'用户名' : ['aa',[Validators.required]],'密码' : ['',[Validators.required]],'类型'  : ['']})}}登录用户(){console.log("Form is = ",this.loginForm.controls);}

文件 2 - form.component.html

 
<div class="form-group"><div class="col-xs-12"><div class="input-group"><input formControlName="username" type="text" id="login-username">

<div class="form-group"><div class="col-xs-12"><div class="input-group"><input formControlName="password" type="password" id="login-password">

<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></选择>

<button type="submit" class="btn btn-sm btn-primary">登录控制面板</button>

解决方案

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

'type': ['非 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屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆