无法设置值以在反应形式中选择答案

【问题标题】：Cant set value to select in Reactive Form无法设置值以在反应形式中选择
【发布时间】：2022-03-28 17:02:17
【问题描述】：

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

我试过了

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

和

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

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

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

【问题讨论】：

标签： angular angular-reactive-forms

【解决方案1】：

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

但是正如@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。

【讨论】：

我会试试这个。你知道为什么这个patchValue() 和setValue() 不起作用吗？

【解决方案2】：

由于<option> 的值是整数，设置选项列表中存在的整数将起作用。您已尝试设置字符串'valueFromServer'，该字符串不存在于选项列表中，因此它不起作用

试试这样：

 this.tourPageForm.get('accomadation').setValue(1);

注意：如果从服务器获取值，请确保首先获取选项列表，只有在设置值之后才会起作用。

【讨论】：

实际上，值不是整数，它们只是一个示例值。我从 server.btw 得到一个字符串我试过你的解决方案它对我不起作用
是的，这与整数无关，只是它必须存在于选项值中，并且首先加载选项值。您的选项值也是从服务器获取的还是静态的？
未从服务器获取我将在组件中使用静态数组。现在我想获得不选择选项的值

【解决方案3】：

我遇到了同样的问题，实际上我们需要将来自服务器的值与option 中设置的当前值相匹配，这是一个示例。否则将无法正常工作。

example.component.html

<select  formControlName="status">
          <option [value]="null">Choose...</option>
          <option value="pending">Pending</option> // only works if setValue('pending')
  </select>

example.component.ts

this.exampleForm.get('status').setValue('pending');

【讨论】：

【解决方案4】：

我们遇到了同样的问题，经过大量调试后，我们的问题是我们没有正确设置 id。最大的问题是它没有在控制台中给出正确的错误，所以我们找不到它，不得不进行大量调试。

<form [formGroup]="formGroup">
<select
  formControlName="selectorControl"
  name="selector"
>
  <option
    *ngFor="let element of selectOptions; index as index"
    [ngValue]="element['id']"
  >
    {{element["description"]}}
  </option>
</select>

这个 [ngValue]="element['id']" 是问题所在，它被解决为 [ngValue]="element"。一旦我们改变它，一切都像一个魅力。

【讨论】：