Question

192

Angular 5 Set selected value of HTML Select Element

rated 0 times [ 195] [ 3] / answers: 1 / hits: 31958 / 6 Years ago, sat, may 12, 2018, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

nestorjarettg

Add To Favorites

Follow

Total Points: 451

Total Questions: 108

Total Answers: 108

Location: Rwanda

Member since Thu, Feb 10, 2022

2 Years ago

nestorjarettg questions

1 Discord Bot Not Playing Audio discord.js v13

Sat, Sep 25, 21, 00:00, 3 Years ago

1 Access and modify react context from jest test with react testing library

Wed, Sep 9, 20, 00:00, 4 Years ago

1 Uncaught ReferenceError: _ is not defined at < anonymous>:1:1 (Not jQuery)

Sun, Feb 16, 20, 00:00, 4 Years ago

1 403 Access Error returned from Browser possibly caused by AWS

Wed, Jan 29, 20, 00:00, 4 Years ago

1 Uncaught TypeError: Class extends value #< Object> is not a constructor or null

Mon, Jan 13, 20, 00:00, 4 Years ago

View All

answered 6 Years ago micayla · Accepted Answer

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

}