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

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

我有以下下拉列表，其中包含Github组织：

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

当我将值传递给

setValue（）

时，我希望选择相应的下拉选项。相反，我得到了一个空白选项。我还尝试了

patchValue（）

。不走运。

---

使用

标签上的属性
与
进行比较
选择
标签：

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

举个小例子，我们想保存一个数字。请参阅[ngValue]=“org.id”和this.myForm.controls['organization'].setValue（value）

从'@angular/core'导入{Component，OnInit}；
从'@angular/forms'导入{FormBuilder，FormControl，FormGroup}；
界面组织{
id：编号；
名称：字符串；
}
@组成部分({
选择器：“应用程序选择”，
模板：`
{{org.name}
组织1
组织2
{{myForm.value | json}
`,
样式URL:['./select.component.css']
})
导出类SelectComponent实现OnInit{
组织：国际组织[]；
myForm:FormGroup；
构造函数（私有fb:FormBuilder）{}
恩戈尼尼特（）{
这是一个组织=[
{id:1，名称：“org 1”}，
{id:2，名称：“org2”}，
{id:3，名称：“org 3”}，
{id:4，名称：“org4”}
];
this.myForm=this.fb.group({
组织：1
})
}
setOrg（值：number）{
this.myForm.controls['organization'].setValue（value）；
}
}

如果我们想保存一个对象，请参见{{myForm.value | json}，我们需要做一些更改。请注意，我们将[ngValue]=“org”，但setOrg（）函数使用一个对象来生成setValue。而不是，它不是有效的setValue（{id:1，name:'org1'}）

从'@angular/core'导入{Component，OnInit}；
....
模板：`
{{org.name}
....`
导出类SelectComponent实现OnInit{
...
恩戈尼尼特（）{
这是一个组织=[
{id:1，名称：“org 1”}，
....
];
this.myForm=this.fb.group({
组织：空
})
}
setOrg（值：number）{
让organization=this.organizations.find（o=>o.id==value）；
this.myForm.controls['organization'].setValue（组织）；
}
我也遇到了同样的问题，并找到了Igor的答案。答案太模糊了，所以我仔细研究了一下。我最终找到了答案，Igor的答案是正确的，尽管缺乏细节。希望这能帮助未来任何人在下拉列表和对象模型上找到
setValue（）

通常，传递到
setValue（）
中的对象模型应与插入下拉选择器的对象相同。例如，如果类型为
Organization
，则
setValue
也应类型为
Organization
。但是，不必共享完全相同的属性

要使
setValue（）
或
patchValue（）
使用对象模型（与某些基本类型相反），请使用Igor指出的
[compareWith]
函数

从
节点\u模块/@angular/material/select/typings/select.d.ts
：

compareWith是将选项值与选定值进行比较的函数。
第一个参数是来自选项的值。第二个参数是值
从所选内容。应返回布尔值

在html模板中

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

不要忘记调用
setValue（）
函数，例如在
ngOnInit（）
中调用，或者在回调函数中调用，如果它是异步的，并且您正在获取数据

例如，在上面OP代码的回调中

// "organization" is whatever object you're trying to patch on the dropdown
this.pipelineForm.get("organizations").setValue(organization)

因此，所有这一切的作用是，
compareOrgs
函数将所选值（即传递到
setValue
的对象，现在在
compareOrgs
中标记为
c2
）的值与每个选项的值（
c1
）进行比较。具体而言，它比较所选值和选项值的
orgId
属性。这就是
FormControl
如何知道要在下拉列表中预选哪个值

您现在可以使用
[ngValue]
访问对象

这是一个很好的资源，它帮助了我：
使用
compareWith
提供了一个比较器函数。我遇到了一个类似的问题，它不仅不适用于下拉列表，而且适用于任何类型的字段。我需要根据订阅更新我的表单值，它只是不适用于“setValue”。我不明白。请记住，正如您定义的那样，select的值是一个对象（您想说？@Eliseo不确定您在说什么——OP的帖子没有提到
org
模型中任何地方的
id
属性。它只是一个示例，“org”是什么？是一个对象，因此，您必须在setValue中使用一个对象。其他选项是，该值是一个字符串或数字，但您必须将其作为值ord.organitation.id，例如，我写了一个小示例
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);
  }
}

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

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

compareOrgs(c1: any, c2: any): boolean {
   return c1 && c2 ? c1.orgId === c2.orgId : c1 === c2; 
}

// "organization" is whatever object you're trying to patch on the dropdown
this.pipelineForm.get("organizations").setValue(organization)