模板驱动表单预选下拉值角度6
模板驱动表单预选下拉值角度6
提问于 2018-08-28 00:14:06
我最初的问题是：Buliding dropdown/select dynamically via reactive forms angular 6
所以我改成了模板驱动的表单，我的下拉列表显示得很好。
我现在的问题是在下拉列表中选择来自数据库的值。这不会发生在我身上。
这是表格，好让你们看得更清楚
<form (ngSubmit)="onSubmit(f)" #f="ngForm">
<div class="form-group form-row" *ngFor="let f of features; let i=index;">
<div class="col-lg-2 text-right"><label for="cmd{{f.FeatureId}}" class="col-form-label">{{f.FeatureCaption}} <app-required-star></app-required-star></label></div>
<div class="col-lg-10">
<!--custom-select-->
<select class="form-control" id="cmd{{f.FeatureId}}" name="cmd{{f.FeatureId}}" [appAutoFocus]="i === 0" ngModel required>
<option value="">Choose...</option>
<option *ngFor="let fl of f.FeatureList" [value]="fl.FeatureId">{{fl.FeatureName}}</option>
</select>
</div>
</div>
<button type="submit" class="btn btn-primary btn-sm" [disabled]="!f.valid">Submit</button>
</form>不同的东西，我已经尝试预选，但没有为我工作。Choose总是为我选择。
1:已应用[attr.selected]="fl.IsSelected ? true : null"至选项。这导致下面的html和选定的属性在那里。
<select _ngcontent-c14="" class="form-control ng-pristine ng-invalid ng-touched" ngmodel="" required=""
ng-reflect-required="" ng-reflect-name="cmdDoorStyle" ng-reflect-model="" ng-reflect-is-apply-auto-focus="true"
id="cmdDoorStyle">
<option _ngcontent-c14="" value="" ng-reflect-value="">Choose...</option>
<!--bindings={
"ng-reflect-ng-for-of": "[object Object],[object Object"
}-->
<option _ngcontent-c14="" value="DRS_SHAKER" ng-reflect-value="DRS_SHAKER" selected="true">Shaker</option>
</select>2:将[attr.selected]="fl.IsSelected ? 'selected' : null"应用到选项。这导致下面的html和选定的属性在那里。
<select _ngcontent-c14="" class="form-control ng-pristine ng-invalid ng-touched" ngmodel="" required=""
ng-reflect-required="" ng-reflect-name="cmdDoorStyle" ng-reflect-model="" ng-reflect-is-apply-auto-focus="true"
id="cmdDoorStyle">
<option _ngcontent-c14="" value="" ng-reflect-value="">Choose...</option>
<!--bindings={
"ng-reflect-ng-for-of": "[object Object],[object Object"
}-->
<option _ngcontent-c14="" value="DRS_SHAKER" ng-reflect-value="DRS_SHAKER" selected="selected">Shaker</option>
</select>3:应用[value]="f.SelectedValue"进行选择，因为我在父模型中有可用的选定值。
<select _ngcontent-c14="" class="form-control ng-pristine ng-invalid ng-touched" ngmodel="" required=""
ng-reflect-required="" ng-reflect-name="cmdDoorStyle" ng-reflect-model="" ng-reflect-is-apply-auto-focus="true"
id="cmdDoorStyle">
<option _ngcontent-c14="" value="" ng-reflect-value="">Choose...</option>
<!--bindings={
"ng-reflect-ng-for-of": "[object Object],[object Object"
}-->
<option _ngcontent-c14="" value="DRS_SHAKER" ng-reflect-value="DRS_SHAKER">Shaker</option>
</select>4:也尝试了patchValue。
//for now using template driven form
@ViewChild('f') configForm: NgForm
this.dataSubscription = this.projectSubService.getProjectSubConfig(this.subId).subscribe(
res => {
this.features = res.Features;
//console.log(this.features);
//pre-select using patchValye
this.features.forEach(i => {
this.patchValue('cmd'+i.FeatureId, i.SelectedValue);
});
},
error => {
handle...
}
);
patchValue(id: string, value: string) {
//console.log(id + '---' + value);
this.configForm.form.patchValue({
id : value ? value : ''
});
}我如何克服这个问题？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-28 01:00:43
这是通过select [ngModel]="f.SelectedValue"上的数据绑定完成的
<select class="form-control" id="cmd{{f.FeatureId}}" name="cmd{{f.FeatureId}}"
[appAutoFocus]="i === 0" [ngModel]="f.SelectedValue" required>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52043272
复制相关文章
相似问题