Angular 5 Set selected value of HTML Select Element

Question

Here is what I'm trying to do:

<select name="manager" id="manager" [(ngModel)]="property.manager" class="form-control" (change)="onChangeManager($event)" required> <option disabled value="">Select Manager</option> <option *ngFor="let manager of managers" [ngValue]="manager" [selected]="manager?.name === 'Subhan Ahmed'"> {{manager?.name}} </option> </select>

What I need is when the view is initialised, I need to set the value of the select where manager?.name == property.manager.name (which is loaded from db on on another event). I've tried to place a default text Subhan Ahmed to select the default value but its not working.

Managers are loaded at the start, I load them from Firestore and assign them to a variable managers: Observable<Manager>; during subscribe(), while property.manageris loaded after another input's change event.

Am i missing something?

You say "which is loaded from db on on another event". What it loaded from the db? I assume it is the list of managers. Is that correct? — Martin Parenteau
– Martin Parenteau, Commented May 12, 2018 at 1:33
Yes, I load Managers from Firestore and assign them to a local variable managers: Observable<Manager>; in subscribe(). — Subhan
– Subhan, Commented May 12, 2018 at 1:36
property.manager is loaded after a change event on an input. managers are loaded at the start. — Subhan
– Subhan, Commented May 12, 2018 at 1:37
Please note that property.manager is bound to the dropdown list with [(ngModel)]. So, it is set by the selected item in the list. It cannot be bound to another input element at the same time. — Martin Parenteau
– Martin Parenteau, Commented May 12, 2018 at 1:46
Exactly, i just want to change the selected value equal to the manager that is loaded later on. — Subhan
– Subhan, Commented May 12, 2018 at 1:48

Martin Parenteau · Accepted Answer · 2018-05-12 03:12:18Z

You can select an item of the dropdown list by setting the value of property.manager. Assuming that selectedName is the name of the Manager item that you want to select, you can do this:

// Case sensitive this.property.manager = this.managers.find(m => m.name === this.selectedName); // Case insensitive let selectedNameUp = this.selectedName.toUpperCase(); this.property.manager = this.managers.find(m => m.name.toUpperCase() === selectedNameUp);

Here are the relevant parts of the markup and code. See this stackblitz for a demo.

HTML:

<select name="manager" [(ngModel)]="property.manager" class="form-control" required> <option disabled [ngValue]="undefined">Select Manager</option> <option *ngFor="let manager of managers" [ngValue]="manager">{{manager.name}}</option> </select> <input type="text" [(ngModel)]="selectedName" (ngModelChange)="onNameChange($event)">

Code:

selectedName: string; property = { ref_no: '', address: '', manager: undefined }; managers = [ { "company": "Test Company", "name": "John Doe", "id": "3oE37Fo2QxGHw52W7UHI" }, { "company": "Another Company", "name": "John Brown", "id": "LRF8xAi48rRuWu0KZex3" }, { "company": "XYZ", "name": "Subhan Ahmed", "id": "TqOQHbdwJdwgwD8Oej8v" } ]; onNameChange($event) { let selectedNameUp = this.selectedName.toUpperCase(); this.property.manager = this.managers.find(m => m.name.toUpperCase() === selectedNameUp); }

Yes It does have an ID generated by Firestore which I snapshot along with the data.
stackblitz.com/edit/angular-coraqv Have a look at this scenario. Type a name in input and hit tab. The select box should show you the selected value.
I updated my answer, and included the stackblitz adapted from yours.
No, In my scenario, its not working. I'll update the stackblitz with more code. I'm just missing something I recon. Your answer was really helpful by the way. I'll accept it as an answer as I get things working so that others can use a correct answer for future references. Thanks

Collectives™ on Stack Overflow

Angular 5 Set selected value of HTML Select Element

1 Answer 1

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Linked

Related