typescript – 使用FormBuilder Angular 2绑定选择列表

发布时间：2020-12-17 17:22:08 所属栏目：安全来源：网络整理

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

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

在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'  : ['','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>

解决方法

您需要将选择值设置为“值”,而不是文本：

'type': ['Non-LDAP']

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!