Formbuilder setvalue（）在下拉选项上使用时未按预期工作

Question

对下拉选择使用Angular 2,4 formbuilder setvalue（）时未按预期工作。

我有以下的下拉列表中选择的是它和Github上组织填充：

<select name="org" formControlName="organizations"> 
    <option *ngFor="let org of organizations" [ngValue]="org">{{org.organization.login}}</option> 
    </select> 

这里是JavaScript代码设置应该选择GitHub的组织。

this.pipelineForm = fb.group({ 
     name:'', 
     organizations:'', 
     repos: '', 
     branches:'', 
     runtime:'', 
     versions:'' 
    }); 

    userService.getOrganizations().subscribe((org:github)=>{ 
    let organizationName = org.data[0]; 
    this.organizations = org.data; 
     this.projects.subscribe((p)=> { 
     p[1].project.subscribe((f)=>{ 

     this.pipelineForm.get("organizations").setValue(f.organizations, {onlySelf: true}); 

      //this.pipelineForm.patchValue(f); 
     }); 
     }); 

    }); 

我期望当我通过将值setValue()将被选择的相应下拉菜单选项。相反，我得到一个空白选项。我也试过patchValue()。没有运气。

Answer 1

您select标签使用属性compareWith：

<select ... [compareWith]="compareByName"> 

然后在你的组件

compareByName(org1: Org, org2: Org): boolean { 
    return org1 && org2 ? org1.name === org2.name : org1 === org2; 
} 

Answer 2

一个小例子实现一个简单的功能，我们要保存的数字。请参阅[ngValue] =“org.id”和this.myForm.controls ['organization']。setValue（value）;

import { Component, OnInit } from '@angular/core'; 
import { FormBuilder, FormControl, FormGroup } from '@angular/forms'; 
interface Iorganization { 
    id: number; 
    name: string; 
} 
@Component({ 
    selector: 'app-select', 
    template: ` 
    <form [formGroup]="myForm" novalidate> 
    <select name="org" formControlName="organization"> 
     <option *ngFor="let org of organizations" [ngValue]="org.id">{{org.name}}</option> 
    </select> 
    </form> 
    <button (click)="setOrg(1)">Org 1</button> 
    <button (click)="setOrg(2)">Org 2</button> 
    {{myForm.value |json}} 
    `, 
    styleUrls: ['./select.component.css'] 
}) 
export class SelectComponent implements OnInit { 
    organizations: Iorganization[]; 
    myForm: FormGroup; 
    constructor(private fb: FormBuilder) { } 
    ngOnInit() { 
    this.organizations = [ 
     { id: 1, name: "org 1" }, 
     { id: 2, name: "org 2" }, 
     { id: 3, name: "org 3" }, 
     { id: 4, name: "org 4" } 
    ]; 
    this.myForm = this.fb.group({ 
     organization: 1 
    }) 
    } 
    setOrg(value: number) { 
    this.myForm.controls['organization'].setValue(value); 
    } 
} 

，如果我们要保存一个对象 - 见{{myForm.value | JSON}} - 我们需要做一些修改。看到我们把[ngValue] =“org”，但是setOrg（）函数使用一个对象来创建setValue。而不是，它不是有效的setValue（{id：1，name：'org1'}）

import { Component, OnInit } from '@angular/core'; 
.... 
template: ` 
<form [formGroup]="myForm" novalidate> 
    <select name="org" formControlName="organization"> 
     <option *ngFor="let org of organizations" [ngValue]="org">{{org.name}}</option> 
    </select> 
    ....` 
export class SelectComponent implements OnInit { 
    ... 
ngOnInit() { 
    this.organizations = [ 
    { id: 1, name: "org 1" }, 
     .... 
    ]; 
    this.myForm = this.fb.group({ 
     organization: null 
    }) 
} 
setOrg(value: number) { 
    let organization=this.organizations.find(o=>o.id==value); 
    this.myForm.controls['organization'].setValue(organization); 
}