Angular 9 Select Binding to Model

Question

before i start I have tried the following

https://www.angularjswiki.com/angular/how-to-bind-a-select-element-to-object-in-angular/ https://www.codeproject.com/Questions/1278097/How-do-you-get-the-value-of-the-selected-option-in Associate select value to ngModel in Angular 4 How to assign selected value to "Select" when value is of class object in angular 2_ https://docs.angularjs.org/api/ng/directive/select

something so easy to do in PHP has taken me 8 hours and I am still not even close. I do not understand what I am doing wrong here?

TS file

shopstates: any = {};
selectedObject: any;
this.shopstates = [
      { statename: 'Australian Capital Territory', statecode: 'ACT' },
      { statename: 'New South Wales', statecode: 'NSW' },
      { statename: 'South Australia', statecode: 'SA' },
      { statename: 'Queensland', statecode: 'QLD' }
 ];

component html file

<select [(ngModel)]="selectedObject" class="form-control" (change)=consoleLog()>
    <option *ngFor="let state of shopstates" [ngValue]="state">{{ state.statename }} ({{ state.statecode }})</option>
</select>

Selected State is {{ selectedObject.state }}

this is very frustrating. I'm about to make a change to try and pass the value to the TS file but I don't want to do this and 2. don't know how to pass the value anyway

Any direction or help is appreciated

Sivakumar Tadisetti · Accepted Answer · 2020-08-18 04:38:40Z

5

You can try like below.

Pass selectedObject to consoleLog(selectedObject) method on change event of select.
selectedObject holds entire state object, so you can't access like selectedObject.state. It should be selectedObject.statename/selectedObject.statecode

Working stackblitz

Template

<select [(ngModel)]="selectedObject" class="form-control" (change)="consoleLog(selectedObject)">
  <option *ngFor="let state of shopstates" [ngValue]="state">{{ state.statename }} ({{ state.statecode }})</option>
</select>
<div>
  <p><b>Selected state Name : </b> {{ selectedObject.statename }}</p>
  <p><b>Selected state Code : </b> {{ selectedObject.statecode }}</p>
</div>

Typescript

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular " + VERSION.major;

  shopstates = [{
      statename: "Australian Capital Territory",
      statecode: "ACT"
    },
    {
      statename: "New South Wales",
      statecode: "NSW"
    },
    {
      statename: "South Australia",
      statecode: "SA"
    },
    {
      statename: "Queensland",
      statecode: "QLD"
    }
  ];
  selectedObject: any = this.shopstates[0];

  consoleLog(statename) {
    console.log(statename);
  }
}

edited Aug 18, 2020 at 4:38

answered Aug 18, 2020 at 4:24

Sivakumar Tadisetti

5,0617 gold badges39 silver badges62 bronze badges

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

15 Comments

Michael Zerofive Jenkins Over a year ago

Okay so it's now showing the values in my html but it's only showing the Default top one ACT. If i select something new from the drop down it console logs the same ACT value and likewise doesn't change the HTML values. Not sure why this would be happening but think it's got something to do with the selectedobject: any = this.shopstates[0] line. As if it's not updating it?

Michael Zerofive Jenkins Over a year ago

just an update, if i change this.shopstates[1] then it sets to NSW and same thing doesn't change with the select :(

Sivakumar Tadisetti Over a year ago

@MichaelZerofiveJenkins did you check the stackblitz provided, that's working right?

Michael Zerofive Jenkins Over a year ago

i did just that even if i direct copy it one to one on my project I am not getting the same result and this is the issue i have. I was hoping that you can help me understand what it is I have not figured out about your answer

Michael Zerofive Jenkins Over a year ago

I think this could be the issue reactive forms vs template driven. I will investigate thank you for your help!

|

Shemang David · Accepted Answer · 2021-02-23 11:22:38Z

In my case, I didn't use ngModel. This method worked perfectly for me.
TEMPLATE HTML file

<select class="form-control" #Select (change)="consoleLog(Select.value)">
   <option *ngFor="let state of shopstates" [value]="state.statename">{{ state.statename }} ({{ state.statecode }})</option>
  </select>

TS File

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular " + VERSION.major;
  selectedState: any;

  shopstates = [{
      statename: "Australian Capital Territory",
      statecode: "ACT"
    },
    {
      statename: "New South Wales",
      statecode: "NSW"
    },
    {
      statename: "South Australia",
      statecode: "SA"
    },
    {
      statename: "Queensland",
      statecode: "QLD"
    }
  ];


  consoleLog(statename:any){
        this.selectedState = statename;
        console.log('curent state is ' + this.selectedState);
      }
}

You can replace statename with statecode depending on what value you want in your template

Collectives™ on Stack Overflow

Angular 9 Select Binding to Model

2 Answers 2

15 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

15 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related