![](/img/trans.png)
[英]Angular - Reactive Form - Default selected value in dropdown
[英]Angular 6 default value of select is not getting selected in Reactive Form
我的表格如下所示。 并且具有默认值的区域下拉是“ALL”,并且从api调用填充其他值。
<form method="POST" for enctype="multipart/form-data" [formGroup]="unitSearchForm">
<div class="form-group">
<label for="Zone">Zone</label>
<select class="form-control" id="zone" formControlName="zoneId">
<option [ngValue]="0">All</option>
<option [ngValue]="zone.ZoneId" *ngFor="let zone of (_zones|async)?.Result">{{ zone.ZoneName}}</option>
</select>
</div>
<div class="form-group">
<input class="form-control" type="text" id="search" formControlName="unitName"
placeholder="Search by Unit Name" />
</div>
<div class="form-group">
<select class="form-control" formControlName="status">
<option [ngValue]="status.Code" *ngFor="let status of _statusArr">{{status.Name}}</option>
</select>
</div>
<div class="align-self-end form-group">
<button type="submit" class="btn btn-primary" (click)="SearchUnits()"><i
class="fa fa-fw fa-search"></i>Search</button>
</div>
</form>
/*
Component Code
*/
ngOnInit() {
this.InitilizeSearchForm();
this.InitilizeSelectors();
}
private InitilizeSearchForm() {
this.unitSearchForm = this._fb.group({
zoneId: ['0'],
unitName:['',Validators.maxLength(100)],
status:['A']
});
}
private InitilizeSelectors(){
let searchCriteria: IDictionary = {}
this._statusArr=this._dataservice.GetStatus();
this._zones = this._adminService.Getzones(searchCriteria);
searchCriteria["status"] = this.unitSaveForm.get('status').value;
}
如何在区域下拉菜单中选择“全部”? 我在初始化表单时尝试设置值。 但它没有用。 始终没有第一个选定的值。
您可以对选项使用[value]
绑定,对All
选项使用[selected]
绑定:
<div class="form-group">
<label for="Zone">Zone</label>
<select class="form-control" id="zone" formControlName="zoneId">
<option value="All" [selected]="'All'">All</option>
<option [value]="zone.ZoneId" *ngFor="let zone of (_zones|async)?.Result">{{ zone.ZoneName}}
</option>
</select>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.