Angular6

Question

严重难倒这里。我在 Angular 项目中有两种反应形式。

两者都有一个 select 控件，选项存储在 class 个变量中。

一种形式使用简单的选项字符串作为员工选项，如：

["Dan Smith", "Mark Johnson", etc.]

另一种形式使用对象，如：

[
  {
    value: "Dan Smith",
    selected: false,
    hidden: false
  },
  ...
]

Stackblitz 示例：https://stackblitz.com/edit/angular-nks51y

在示例中，我有用于添加新随机选项和设置随机 selected 选项的按钮。

这些按钮适用于使用简单字符串的表单，但不适用于使用对象 {} 的表单。

此外，默认值不是用对象形式设置的。

我知道我遗漏了什么，但不知道是什么。

Answer 1

您的 select 选项的 ngValue 是一个字符串 [ngValue]="name.value" 并且在您为其设置对象时类型不匹配。

<option *ngFor="let name of employeeNameObjectOptions" [selected]="name.selected" [ngValue]="name" [hidden]="name.hidden">
        {{ name.value }}
</option>

Answer 2

你的代码有两个错误：

您应该永远不要设置select元素的selected属性。绑定的全部要点是 selected 的选项是设置为表单控件的值的选项。模型是真理的来源，而不是视图
selected 值（即 FormControl 的值）是一个对象：员工对象本身。但是模板中使用的 ngValue 是 name.value，即一个字符串，它是员工对象的值。员工对象不能 === 到它的 value 属性.

所以代码应该是：

<select formControlName="employeeName">
  <option *ngFor="let employee of employeeNameObjectOptions" [ngValue]="employee" [hidden]="employee.hidden">
    {{ employee.value }}
  </option>                
</select>

请注意，我选择将 name 重命名为 employee，因为这是变量引用的内容：雇员，而不是姓名。好的命名有助于找出错误。

您的固定演示：https://stackblitz.com/edit/angular-pundfg?file=src%2Fapp%2Fapp.component.html

Angular6 - 反应形式 - 使用对象和 [selected] 绑定时无法以编程方式设置 select 选项

Angular6 - Reactive Forms - Cannot programmatically set select option when using objects and [selected] binding

angular2-forms

angular

angular-reactive-forms