如何设置Angular 2 Reactive Select的初始值答案

【问题标题】：How to Set Initial Value of Angular 2 Reactive Select如何设置Angular 2 Reactive Select的初始值
【发布时间】：2017-06-17 21:38:05
【问题描述】：

我有一个选择列表，我想将其初始化为从服务器返回的已保存值。但无论我尝试什么，我都无法让它使用选定的值。

我正在使用 Angular 2.2.0 和 Reactive Forms。

这是选择列表的值列表。

private categoryList: ICategory[] = [
    new Category({ id: 1, name: 'Cat 1' }),
    new Category({ id: 2, name: 'Cat 2' }),
    new Category({ id: 3, name: 'cat 3' })
];

保存的值为：

{ id: 1, name: 'Cat 1' }

使用 FormBuilder 创建表单

   this.itemForm = this.fb.group({
      name: [null, Validators.required],
      description: [null, Validators.required],
      weight: [null, Validators.required],
      dimensions: [null, Validators.required],
      category:  [null, Validators.required] 
    });

然后我用保存的数据初始化它

  (<FormGroup>this.itemForm)
        .setValue({
          name: item.name,
          description: item.description,
          weight: item.weight,
          dimensions: item.dimensions,
          category: item.category 
        }, { onlySelf: true });

模板如下所示

<select name="category" [formControl]="itemForm.controls['category']">
         <option [selected]="itemForm.controls['category'].value == null" value="">-- Select --</option>
        <option *ngFor="let cat of categories" [ngValue]="cat">  
            {{cat.name}}
        </option>
    </select>
{{itemForm.controls['category'].value | json }}

预期结果 在select中选择了第一项的名称，并与模板下显示的JSON中的文本匹配

实际行为 JSON 显示了这一点：

 { "id": 1, "name": "Cat 1" }

但是选择中没有选择任何内容

如果选择了 --Select--，则 JSON 会正确更新为 ""。

如果选择了另一只猫，JSON 也会正确更新。

我做错了什么，如何初始化选择？

编辑我也试过这个：

<option *ngFor="let cat of categories" [selected]="itemForm.controls['category'].value.id == cat.id" [ngValue]="cat">

【问题讨论】：

不知道您是否真的会收到我的回答的通知，因为我删除了它并取消了它。如果没有，那么请在下面寻找答案，希望对您有所帮助！ :)

标签： angular angular2-forms angular2-formbuilder

【解决方案1】：

尝试使用 [attr.selected] 和 [attr.value] 而不是 [selected] 和 [ngValue]。

【讨论】：

【解决方案2】：

如果我理解正确，您想设置一个默认值。然后你可以参考你的item.category + 你要设置的值的索引。

我会像这样设置值，我们将第一项设置为默认值。

setValues() {
    this.itemForm
        .setValue({
            name: item.name,
            category: item.category[0].id
        })
}

然后在表单中使用formGroup和formControlName，所以：

<form [formGroup]="itemForm">
  <input formControlName="name"/>
  <small *ngIf="!itemForm.controls.name.valid">Name is required!</small>
  <!-- More code -->
  <select formControlName="category">
    <! -- set ngValue to cat.id --> instead of just cat!
    <option *ngFor="let cat of categories" [ngValue]="cat.id">  
      {{cat.name}}
    </option>
  </select>
</form>

将[ngValue]（或仅使用[value]）设置为cat.name 或cat.id，具体取决于您要使用的内容，因此如果您使用ngValue，则不会绑定整个对象！

这是一个有效的Plunker。不知道您在哪里设置值，此时，我在 plunker 中创建了一个setValues-按钮，以模拟稍后设置的值。

希望对您有所帮助！

【讨论】：

以为我已经尝试过这种排列，但它可能已经丢失了，因为实际代码比这更复杂一些。感谢您让我朝着正确的方向前进！
对我来说关键是 formControlName="name" 我正在构建一个动态表单，所以对我来说它是 formControlName="{{name}}"

【解决方案3】：

试试这个代码。它正在工作 Angular 5

<select formControlName="category">
 <option [ngValue]="undefined" selected disabled>Select Type</option>
    <option *ngFor="let cat of categories" [ngValue]="cat.id">  
      {{cat.name}}
    </option>
  </select>

【讨论】：