フォームメーカーのsetvalue（）がドロップダウンで使用されているときに期待どおりに動作しない

Question

角度2,4のformbuilder setvalue（）は、ドロップダウンの選択時に期待通りに機能しません。

私は、次のドロップダウンがそれはGithubの団体が移入されます選択があります。ここでは

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

を選択する必要がありGithubの組織を設定するJavaScriptコードです。

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); 
    } 
} 

我々は-see {{myForm.value | JSON}}オブジェクトを保存したい場合は - 私たちはいくつかの変更を行う必要があります。 [ngValue] = "org"を入れたのを見てください。しかしsetOrg（）関数はオブジェクトを使ってsetValueを作ります。そして、それは有効ではありません。setValue（{id：1、name： 'org1'}）