我在表单中有多个下拉菜单,但是我无法将“请选择”作为这些下拉菜单的默认选择。
我的下拉菜单完全空白。单击后,我们可以看到项目已绑定在其中。
HTML
<form novalidate (ngSubmit)="onSubmit(projectinformationFrm)" [formGroup]="projectinformationFrm">
<select [(ngModel)]="selectedOrganization" placeholder="Organization" formControlName="OrganizationId" (change)="onSelectOrgEdit($event.target.value)" class="form-control">
<option *ngFor="let org of OrganizationList" [ngValue]="org .OrganizationId" [selected]="org.OrganizationId==selectedOrganization">
{{ org .OrganizationName }}
</option>
</select>
<div>
<a class="btn btn-default" (click)="modal.dismiss()"><span class="glyphicon glyphicon-remove"></span>Cancel</a>
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-save"></span>Save</button>
</div>
</form>
Component.ts
public selectedOrganization: number=0;
LoadListforProjectManager(): void {
try {
this._service.get(URL)
.subscribe(data => { this.OrganizationList = data; },
error => this.msg = <any>error);
}
catch (e) {
this._errorLogService.LogError(e);
}
}
我还从存储过程中将0,"--Please Select--"
作为列表的第一项。
答案 0 :(得分:2)
而不是将列表中的第一项作为 Please Select 来获取,而是在组件模板中创建它。也不要将[(ngModel)]
与ReactiveForms方法一起使用。像这样:
<form novalidate (ngSubmit)="onSubmit(projectinformationFrm)" [formGroup]="projectinformationFrm">
<select placeholder="Organization" formControlName="OrganizationId" (change)="onSelectOrgEdit($event.target.value)" class="form-control">
<option value="null" disabled>Please select</option>
<option *ngFor="let org of OrganizationList" [ngValue]="org .OrganizationId" [selected]="org.OrganizationId==selectedOrganization">
{{ org .OrganizationName }}
</option>
</select>
<div>
<a class="btn btn-default" (click)="modal.dismiss()"><span class="glyphicon glyphicon-remove"></span>Cancel</a>
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-save"></span>Save</button>
</div>
</form>
这是您推荐的Working Sample StackBlitz。