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-18T04:38:40.910

4

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 '20 at 04:38

answered Aug 18 '20 at 04:24

Sivakumar Tadisetti

4,865
7
34
56

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 Aug 18 '20 at 05:33
just an update, if i change this.shopstates[1] then it sets to NSW and same thing doesn't change with the select :( – Michael Zerofive Jenkins Aug 18 '20 at 05:44
@MichaelZerofiveJenkins did you check the stackblitz provided, that's working right? – Sivakumar Tadisetti Aug 18 '20 at 05:58
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 Aug 18 '20 at 06:01
@MichaelZerofiveJenkins Can you create stackblitz with the reproducible issue? Because I need to check your code to find the issue – Sivakumar Tadisetti Aug 18 '20 at 06:03
It works if i re-create this part in stackblitz because like i said i copied your code 1:1. Is the issue that I am working in Angular 9 and this website is Angular 10? – Michael Zerofive Jenkins Aug 18 '20 at 06:11
@MichaelZerofiveJenkins no it won't be like that, because [(ngModel)] exists from angular v2. and change event is normal one – Sivakumar Tadisetti Aug 18 '20 at 06:18
Can you give me the link to recreated stackblitz by you? – Sivakumar Tadisetti Aug 18 '20 at 06:19
https://stackblitz.com/edit/angular-ivy-astqir?file=src/app/app.component.html This it? I don't know this world too much mate maybe I can screen share with you for 5 minutes? or if you charge out happy to pay for your time if it's reasonable – Michael Zerofive Jenkins Aug 18 '20 at 06:22
@MichaelZerofiveJenkins No, I am just helping you. No payment needed and happy to help ;) – Sivakumar Tadisetti Aug 18 '20 at 06:33
Okay thank you. Maybe i should use this answer https://coryrylan.com/blog/creating-a-dynamic-select-with-angular-forms for Angular 9? I marked your answer as correct anyway since it does work in A10 – Michael Zerofive Jenkins Aug 18 '20 at 06:47
That blog given example using reactive form!!! but you are using template driven form right? – Sivakumar Tadisetti Aug 18 '20 at 06:55
how can I tell that Siva which is better? – Michael Zerofive Jenkins Aug 18 '20 at 06:57
I say reactive form approach is better. Anyways if that blog post helps you that's fine and thank you for marking the answer as correct ;) – Sivakumar Tadisetti Aug 18 '20 at 06:59
1

I think this could be the issue reactive forms vs template driven. I will investigate thank you for your help! – Michael Zerofive Jenkins Aug 18 '20 at 07:03

score 0 · Answer 2 · answered Feb 23 '21 at 11:22

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

Angular 9 Select Binding to Model

2 Answers2