0

I am writing a read-only form that displays a set of data retrieved on page load. One section on the form is an IsActive dropdownlist with values True or False. On ngOnInit I retrieve this IsActive boolean value from the database and bind it with my model property isActive. I want to display this model value with its matching dropdown value. So for example if the IsActive flag is true, I want the true option from the dropdown to be selected when the page loads.

HTML:

<label class="col-md-2 col-form-label">Is Active</label>
    <div class="col-md-10">
        <select id="IsActive" name="IsActive" class="form-control" [(ngModel)]="selectedAccount.isActive" [disabled]="!isEditable">
            <option [value]="1">True</option>
            <option [value]="0">False</option>
        </select>
    </div>

However the above code has a blank selected option on page load and only when clicked does it show the true and false options

Protozoid
  • 1,207
  • 1
  • 8
  • 16
Mark
  • 501
  • 2
  • 11
  • 28
  • try using `[ngValue]` for the options.... https://stackoverflow.com/questions/35945001/binding-select-element-to-object-in-angular – Ric Jun 07 '18 at 08:34
  • Possible duplicate of [Getting object properties via ngModel select list in Angular 2?](https://stackoverflow.com/questions/37669365/getting-object-properties-via-ngmodel-select-list-in-angular-2) – bugs Jun 07 '18 at 08:35

1 Answers1

0

YOu can try this its working

option : any = [];
selectedAccount: any;
ngOnInit(){
this.selectedAccount.isActive = true;
this.option = [{"name": "true", value: true}, {name: "false", value: false}]
this.option.map(res =>{ if (res.value == this.selectedAccount.isActive){
  this.selected = res
}
});

}
<div class="col-md-10">
        <select id="IsActive" name="IsActive" class="form-control" [(ngModel)]="selectedAccount.isActive" [disabled]="!isEditable">
        <option *ngFor="let option of selected" value={{option.value}}>{{option.name}}</option>
        </select>
    </div>
Velusamy Venkatraman
  • 726
  • 4
  • 16
  • Hi @VeluDhanesh the above code did not work. Could you please suggest another approach if you have another one – Mark Jun 08 '18 at 00:32