Template driven form preselecting dropdown value angular 6

Question

My original issue was this: Buliding dropdown/select dynamically via reactive forms angular 6

So i changed to template driven form and my dropdowns are displaying fine.

My issue now is per-selecting the value in the dropdown which is coming from the database. This is not happening for me.

Here is the form so that you guys have clear picture

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

Different things that i have already tried to pre-select but nothing is working for me. Choose is always selected for me.

1: applied [attr.selected]="fl.IsSelected ? true : null" to option. This results in following html and selected attribute is there.

<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: applied [attr.selected]="fl.IsSelected ? 'selected' : null" to option. This results in following html and selected attribute is there.

<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: applied [value]="f.SelectedValue" to select since i have the selected value available i the parent model.

<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: tried patchValue as well.

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

How can i overcome this issue?

Answer 1

Done it through data binding on select [ngModel]="f.SelectedValue"

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