Question

我在角度2项目中有一个下拉列表

 <div class="form-group">
                      <label for="vendors">Vendors</label>
                      <select class="form-control" id="vendor_id" name="vendor_id" [(ngModel)]="selectedVendor"  (ngModelChange)="onVendorChange($event)" required>
                            <option *ngFor=" let vendor of vendors " [ngValue]="vendor"> {{vendor.business_name}} </option>
                       </select>
                 </div>

这在chrome中工作得很好，但是当我在Safari中打开它时，即使我没有选择任何内容也加载了页面，它首先显示一个被选中，但是如果我点击提交它将显示该场是强制性的。

在Safari中的

实际上它显示了第一个项目，但实际上它没有被选中。如何解决这个问题？

Answer 1

事实上，您可能会发现接受的答案是不够的。至少使用Angular 5和Safari，我发现你必须明确地使选项未定义。换句话说：

 <option disabled selected value=undefined> --Select-- </option>

否则，该选项将被简单地标记为已禁用，Safari将继续显示它已选择第一个真实选项，而实际上它不是（也可能不是）。

Answer 2

这不是一个角度问题，这是safari / mobile safari上的默认行为。一个简单的解决方案/解决方法如下所示。

如果您添加其他选项框，例如：

<option disabled selected value> --Select-- </option>

然后您的代码变为：

<div class="form-group">
    <label for="vendors">Vendors</label>
    <select class="form-control" id="vendor_id" name="vendor_id" [(ngModel)]="selectedVendor"  (ngModelChange)="onVendorChange($event)" required>
        <option disabled selected value> --Select-- </option>
        <option *ngFor=" let vendor of vendors " [ngValue]="vendor"> {{vendor.business_name}} </option>
    </select>
</div>

这样你就无法重新选择第一个＆＃34;选择＆＃34;用户进行有效选择后的框，从this answer回答。

下降在Safari中没有按预期工作？

2 个答案: