Safari 浏览器 - 选择下拉列表不显示默认选项，只有 ngFor 的第一个选项

Question

我目前遇到的问题是我的一个选择下拉框没有按我的预期显示，只是在 Safari 浏览器中/在某些 Mac IOS 设备上。

我希望下拉列表在字段和下拉列表中显示“选择国家/地区”，提示用户选择一个国家/地区。 然而，“英国”首先显示在该字段中，这是第一个 ngFor 中的第一个选项，但“选择国家”首先显示在下拉列表中（灰色）。

我尝试添加/删除“选择国家/地区”文本。 我不确定更改 value 的值是否有助于或可能添加样式属性。

我正在 BrowserStack 上测试并使用 Angular 10。

HTML模板

<div class="mb-4">
    <label class="block text-sm text-gray-600 text-md font-medium mb-1">Country *</label>
    <div class="relative">
        <select name="country"
                class="form-control custom-select block sm:text-sm appearance-none text-gray-600 w-full bg-white border border-gray-300 hover:border-gray-500 px-3 py-2 pr-8 rounded-md shadow-sm leading-tight focus:ring-blue-500 focus:border-blue-500"
                formControlName="country"
                [class.border-red-500]="country.invalid && country.touched"
                autocomplete="off"
                required>
            <option [value]="null" selected disabled hidden>Select country</option>
            <option *ngFor="let country of popularCountries" [value]="country.id">
                {{ country.name }}
            </option>
            <option *ngFor="let country of otherCountries" [value]="country.id">
                {{ country.name }}
            </option>
        </select>
    </div>
</div>

TS组件

this.secondFormGroup = this._formBuilder.group({
    country: ['', Validators.required],
        });

this.popularCountries = this.countries.filter(f => f.name === "United Kingdom" || f.name === "United States");
this.otherCountries = this.countries.filter(f => f.name !== "United Kingdom" && f.name !== "United States");

Answer 1

感谢 eko 和 Nicolas 的投入。 我将 formBuilder 中的空字符串 '' 更改为 Null，这解决了问题。 并不完全高兴，因为模板代码应该可以正常工作，因为它可以在我的程序中的其他地方工作。

this.secondFormGroup = this._formBuilder.group({
    country: [Null, Validators.required],
        });