我在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 ]]
});
}
这就是我所看到的:
以下是可能对您有用的代码: -
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;
}
试试这个:
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>
在我的情况下添加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>