Angular2 +绑定选择的选项+ ngForm

Question

How can I get the selected item to submit to the service? Doing like form.value['name'] works for field name, but doesn't for field country.

I've tried some solutions I've found with selectedCountry, but I think I didn't understand how to do it so.

Considerations:

• Only (in my opinion) the relevant code is presented bellow
• countries is a json with keys "id", "code" and "name" and is being retrieved correctly from respective service

signup.component.html

<form (ngSubmit)="onSubmit(f)" #f="ngForm">
    <div class="input-field">
      <input type="text" id="name" name="name" class="validate" ngModel>
      <label for="name" data-error="nome inválido">Nome</label>
    </div>
    <div class="input-field">
       <select id="country" name="country" [(ngModel)]="selectedCountry">
         <option [ngValue]="" selected>Escolha um país</option>
         <option *ngFor="let country of countries" [ngValue]="country" > {{country.code}} - {{country.name}} </option>
       </select>
       <label for="country">País onde reside</label>
    </div>
    <button class="btn btn-primary" type="submit">Sign Up</button>
</form>

signup.component.ts

export class SignupComponent implements OnInit {
  countries: any[];
  selectedCountry: Object = {};

  onSubmit(form: NgForm) {
    this.authService
        .signUp(form.value['name'], form.value['country'])
        .subscribe(signUpResult => {
            //some code
        });
  }
}

Answer 1

Please try the Following Way

@Component({
      selector: 'my-app',
      template:`
        <h1>Selecting Number</h1>
        <select type="number" [(ngModel)]="levelNum" (ngModelChange)="toNumber()">
          <option *ngFor="let level of levels" [ngValue]="level.num">{{level.name}}</option>
        </select>
        {{levelNum}}
      `,
    })
    export class AppComponent {
      levelNum:number;
      levels:Array<Object> = [
          {num: 0, name: "AA"},
          {num: 1, name: "BB"}
      ];

      toNumber(){
        this.levelNum = +this.levelNum;
        console.log(this.levelNum);
      }
    }

Answer 2

app.module.ts

import { FormsModule } from '@angular/forms';

@NgModule({
  bootstrap: [ AppComponent ],
  declarations: [
    AppComponent,
    // .. some other components

  ],
  imports: [ // import Angular's modules
    BrowserModule,
    FormsModule
    // .. some other modules
  ],
  providers: []
})
export class AppModule {}

your.component.ts

@Component({
      selector: 'my-app',
      template:`
        <select id="country" name="country" [(ngModel)]="selectedCountry">
         <option value="">Escolha um país</option>
         <option *ngFor="let country of countries" [ngValue]="country" > {{country.code}} - {{country.name}} </option>
       </select>
      `,
    })
    export class AppComponent {
      public selectedCountry;
    }

Edited