![](/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.