Angular 6-占位符文本对于选择的选项列表不可见

Question

我在Windows 10笔记本电脑上的chrome浏览器71版中看不到选择列表占位符。

当前仅看到空白而不是占位符文本。

这是我的表单html：

       <form [formGroup]="form" (ngSubmit)="submit()">
         <select formControlName="sector" class="col-12 field">
            <option [value]="null" disabled="true">Select Sector*</option>
            <option [value]="sector" *ngFor="let sector of jobOptions.sectors">{{ sector }}</option>
          </select>
      </form>

这是我的表单：

  public createForm(): void {
    this.form = this.formBuilder.group({
      sector: [ null, [ Validators.required ]]
    });
  }

这是我看到的：

Answer 1

下面的代码可能会帮助您：-

app.component.html：-

<select>
          <option class="placeholder" selected disabled value="">Select 
          language</option>
          <option *ngFor="let option of field.options" [value]="option.name"> 
          {{option.name}}</option>
</select>

app.component.css：-

select > .placeholder {
display: none;
}

Answer 2

尝试一下：

 public createForm(): void {
   this.form = this.formBuilder.group({
    sector: [ null, Validators.required ]
  });

}

和在模板中：

 <select formControlName="sector" class="col-12 field">
        <option value="null" disabled selected hidden >Select Sector*</option>
        <option [value]="sector" *ngFor="let sector of jobOptions.sectors">{{ sector }}</option>
      </select>

Answer 3

就我而言，添加required可以解决问题。

<select formControlName="sector" class="col-12 field" required>
   <option value="null" disabled selected hidden>Select Sector*</option>
   <option [value]="sector" *ngFor="let sector of jobOptions.sectors">
      {{ sector }} 
   </option>
</select>