ngModel and ngFor select options

Question

Im doing a form that changes with selected option.

<select multiple class="form-control col-6" id="efeitos" [(ngModel)]="test" name='effect'>
                <option *ngFor='let eff of effects' [ngValue]="eff">{{eff.name}}</option>
            </select>
            <textarea class="col-5" readonly>{{test.desc}}</textarea>

textarea never appears.

<p>{{test | json}}</p>

Shows: [ { "name": "effect", "desc": "Lorem ipsum dolor" } ] instead of desired { "name": "effect", "desc": "Lorem ipsum dolor" }

first post here, pls some help

score 0 · Answer 1 · answered Jun 22 '20 at 15:08

0

You get the array in test because you use the multiple attribute, just remove multiple (if you need the multiple, then Array, I think, is the expected result for you)

answered Jun 22 '20 at 15:08

izmaylovdev

1,828
8
16

score 0 · Answer 2 · answered Jun 22 '20 at 15:26

0

it could be also this way: {{

}}

answered Jun 22 '20 at 15:26

Samuel Elias Bustillo Agüero

21
4

score 0 · Answer 3 · answered Jun 22 '20 at 15:55

When the property multiple is supplied to the select tag, there could be multiple selections. So naturally the test variable would be an array. You could try to gather desc properties from all the selected elements using array map function.

Controller

export class AppComponent  {
  ...
  test: Effect[] = [{ 'name': '', 'desc': 'please select an effect'}];

  getDesc() {
    return this.test.map(item => item.desc)
  }
}

Template

<textarea class="col-5" readonly>
{{ getDesc() }}
</textarea>

Note: This method is inefficient. If you aren't controlling the change detection strategy manually, getDesc() function might be called multiple times than intended. This will be a bottleneck when the test array has too many elements since the entire array is iterated for each call.

ngModel and ngFor select options

3 Answers3