无法设置要在反应形式中选择的值

Question

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

我试过

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

和

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

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

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

Answer 1

据我所知，您正在设置以正确方式形成控制的值。

然而，正如 @Adrita 指出的，如果value 属性dropdown包含该值，则将选择该值，否则不会发生选择。Options

看看这个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。