时间戳

首页 > 解决方案 > 无法设置值以在反应形式中选择

angular - 无法设置值以在反应形式中选择

问题描述

我的组件中有一个反应式表单。当组件初始化时，我想将值设置为组件中的选择字段，而不是作为选项。订阅它后从服务器获取的值是可观察的，我想在其中显示该值选择字段作为默认值

我试过

this.formName.get('controlName').setValue('valueFromServer')

和

this.formName.get('controlName').patchValue('valueFromServer')

还有几个stackoverflow解决方案，但这些对我不起作用。这是我的stackblitz示例。谁能告诉我这里有什么问题

https://stackblitz.com/edit/angular-izarqy

标签： angularangular-reactive-forms

解决方案

您正在以正确的方式设置值。

但是正如@Adrita 指出的那样dropdown，如果值出现在Options value 属性中，则会选择该值。

看看这个StackBlitz。

在模板中：

  this.tourPageForm.get('accomadation').setValue('valueFromServer'),

在视图中：

  <select  style="width:100px" formControlName="accomadation" class="form-control border">
         <option value="valueFromServer">1</option>
  </select>

编辑 ：

实际上setValue和patchValue正在工作。检查如下

 this.tourPageForm.get('accomadation').setValue('valueFromServer');
 this.tourPageForm.get('mealType').setValue('Value recive from Server');
 console.log(this.tourPageForm.value)

当您控制台时tourPageForm，您将获得以下值。

accomadation: "valueFromServer"
mealType: "Value recive from Server"
transportation: ""

这意味着setValue并且patchValue正在工作，但dropdown没有选择表单，因为它们没有出现在Options.

我希望这有帮助.. ：）

推荐阅读