模板驱动的表单预选下拉值 angular 6

Question

我原来的问题是这样的： Buliding dropdown/select dynamically via reactive forms angular 6

所以我改为模板驱动形式，我的下拉菜单显示正常。

我现在的问题是每个 selecting 来自数据库的下拉列表中的值。这不会发生在我身上。

表格给大家看清楚了

  <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>

我已经尝试过 select 的不同内容，但对我来说没有任何效果。选择总是 select 适合我。

1：将 [attr.selected]="fl.IsSelected ? true : null" 应用于选项。这导致以下 html 和 selected 属性在那里。

<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 和 selected 属性在那里。

<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 因为我在父模型中有可用的 selected 值。

<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 : ''
    });
  }

我该如何解决这个问题？

Answer 1

通过 select [ngModel]="f.SelectedValue"

上的数据绑定完成

<select class="form-control" id="cmd{{f.FeatureId}}" name="cmd{{f.FeatureId}}" 
[appAutoFocus]="i === 0" [ngModel]="f.SelectedValue" required>

模板驱动的表单预选下拉值 angular 6

Template driven form preselecting dropdown value angular 6

angular

angular-forms