CODEWITHSUNDEEP
javascriptangulartypescriptselect
Michael Zerofive Jenkins
Michael Zerofive Jenkins

Reputation: 69

Angular 9 Select Binding to Model

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

Upvotes: 0

Views: 11240

Answers (2)

Shemang David
Shemang David

Reputation: 190

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

Upvotes: 0

Sivakumar Tadisetti
Sivakumar Tadisetti

Reputation: 5021

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

Upvotes: 5

Related Questions