Two-way binding for select element doesn't work properly | Angular 11

Question

I have a JSON with structure:

For item

"item": {
        "pk": "123456",
        "title": "Title4",
        "list_fields": [
            {
                "pk": "12345",
                "title": "Selector",
                "type": "SEL",
                "position": 1,
                "locked": true,
                "value": {
                        "pk": 567,
                        "value": "Finished",
                        "position": 3,
                        "color": "FF0000"
                }
            }
        ]           
    },

For its selectors

"field": {
  "pk": "12345",
  "type": "SEL",
  "locked": true,
  "position": 1,
  "values": [
      {
          "pk": 123,
          "value": "Not Started",
          "position": 1,
          "color": "FF0000"
      },
      {
          "pk": 345,
          "value": "In Process",
          "position": 2,
          "color": "FF0000"
      },
      {
          "pk": 567,
          "value": "Finished",
          "position": 3,
          "color": "FF0000"
      }
    ]
}

So, I trying to make a simple selector, where I can see current list_fields values, that a part of field

    <ng-container *ngFor="let list_field of item.list_fields">

            <select [(ngModel)]="list_field.value" [name]="list_field.pk" [id]="list_field.pk">
                <option disabled>Select value</option>
                <option *ngFor="let val of field.values" [ngValue]="val">{{ val.value }}</option>
            </select>
        
    </ng-container>

When I made this selector, I got issue: when page loads, selector is empty (looks like, current value doest bind to select element via [(ngModel)])

But when I start to select value from select dropdown, selected value bind to item with no problem.

What am I need to do to bind CURRENT value to selector, when page loads?

you have not set any initial value list_field.value is undefined — Muhammed Albarmavi
– Muhammed Albarmavi, Commented Dec 22, 2020 at 12:03
Initial value was on init. You can see initial value in on screenshot and inside JSON example: {"pk": 567,"value": "Finished","position": 3,"color": "FF0000"} — s_spirit
– s_spirit, Commented Dec 22, 2020 at 12:05
Looks like a problem occurring because I trying to operate with whole object inside selector, but not with a unique value (like pk) inside of it. When I trying to operate with value.pk in selector and inside ngModel - all works fine. But I NEED to operate with a whole object... — s_spirit
– s_spirit, Commented Dec 22, 2020 at 12:08
if you use ngValue the selected value must base the same object reference — Muhammed Albarmavi
– Muhammed Albarmavi, Commented Dec 22, 2020 at 12:18

Muhammed Albarmavi · Accepted Answer · 2020-12-22 12:16:44Z

1

if you use ngValue as the value of the option this mean you need to set list_field.value as one of the field.values object because the selected value compared base of object reference

ngOnInit(){
this.field.value = this.field.values[2];
}

stackblitz demo 🚀

answered Dec 22, 2020 at 12:16

Muhammed Albarmavi

24.5k9 gold badges72 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

s_spirit Over a year ago

Yes, in order to question - its worked, thank you. But model is too flexible to perform such tasks on init: a lot fields may be there. So, my solution was to use value.pk inside selector, detect selector change with (change) and change whole object, using value.pk to find that object inside this.field.values

Collectives™ on Stack Overflow

Two-way binding for select element doesn't work properly | Angular 11

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related