Angular 5 - 反应形式：从下拉列表中选择空选项答案

【问题标题】：Angular 5 - Reactive form: Select empty option from dropdownAngular 5 - 反应形式：从下拉列表中选择空选项
【发布时间】：2020-08-09 10:32:53
【问题描述】：

我正在使用响应式表单：

这是我在 html 文件中的表单：

<select class="form-group form-control" formControlName="Control{{prop.id}}" id="Control {{prop.id}}" name="Control{{prop.id}}" [required]="prop.mandatory" (change)="changeDropdown ($ event, prop.id)">
  <option value=""> Select </option>
  <option *ngFor="let data of dataMap.get (prop.id)" value="{{data.value}}">{{data.text}} </option>
</select>

我想从 ts 文件中选择我需要的选项，当我这样做时，它可以完美地工作：

this.formLoad.controls ['Control' + id] .setValue (1);

现在我想选择值为“”的选项（值名称：选择）：

this.formLoad.controls ['Control' + id] .setValue ("");

这对我不起作用，可能是什么问题？

谢谢，

【问题讨论】：

可能尝试将值设置为“0”或“-1”（如果使用 0“0”）。
尝试设置为空字符串时是否遇到任何错误？

标签： angular angular-reactive-forms

【解决方案1】：

您也可以为选项 select 分配一些值。当您想要选择某个选项时，从 .ts 文件中设置该值。当您想使用该数据将其设置在某个对象或某物中时，您只需添加一个值不应该等于该选择的条件。

假设您将 default 作为值。

所以更新你的代码如下：

<select class="form-group form-control" formControlName="Control{{prop.id}}" id="Control {{prop.id}}" name="Control{{prop.id}}" [required]="prop.mandatory" (change)="changeDropdown ($ event, prop.id)">
  <option value="default"> Select </option>
  <option *ngFor="let data of dataMap.get (prop.id)" value="{{data.value}}">{{data.text}} </option>
</select>

和

this.formLoad.controls ['Control' + id] .setValue ("default");

当你使用这个选定的选项时，添加这个。

if(selectedValue !== 'default'){
.........
}

【讨论】：

【解决方案2】：

这里缺少很多代码来使一切正常，所以我会做一些假设。你可能想使用响应式表单 api：

this.formLoad.get('Control' + id).setValue(1);

那你可以试试这样设置：

this.form.get('Control' + id).setValue('')

此 API 通常为您提供更好的控制。

我试图用 stackblitz 重现这个：

https://stackblitz.com/edit/angular-ivy-seuwh4?file=src%2Fapp%2Fapp.component.ts

【讨论】：