Q:

Value not showing for input field using one way binding angular2

Objective: Get a collection of values based on the dropdown selection and place them in hidden input fields to be included in my model;
The relative html:

<select class="selectFoo" (change)="onSelect($event.target.value)" name="FooName" ngModel>
            <option selected="selected">--Select--</option>
            <option *ngFor="let foo of foos" [value]="foo.ID">{{foo.Name}}
</option>
</select>
<input type="hidden" [value]="fooAddress" name="FooAddress" ngModel/>

In the code above I called a function named OnSelect to get the data about the selected foo. The foos are populated using a webservice call. Here is the snippet from my ts file.

import { Component, OnInit } from '@angular/core';

import { Foo } from './model';

import { DataService } from './data.service';


@Component({
  moduleId: module.id,
  selector: 'add-on',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  foos : Foo[];

  selectedFoo: Foo;
  fooAddress: string;

  onSelect(fooID){
      this.selectedFoo = null;
      for(var i = 0; i < this.foos.length; i++)
      {
        console.log(this.foos[i].ID);
        if(this.foos[i].ID == fooID){
          this.selectedFoo = this.foos[i];
          this.fooAddress = this.selectedFoo.Address.toString();
        }
      }
    }
   }

I originally tried one way binding my value to the selectedFoo but I was getting an error indicating my Address value wasn't defined. I noticed I could set the value equal to selectedFoo and it didn't error. So i created a new variable that was set to the fooAddress based on the selected foo. I get no value even though while stepping through the code I see it has a value.
How can I get my value to populate so I can use it in my model? Let me know if I need to provide anything else.
Thanks!

A:

If I am correctly understanding what you are after then something like this would work:
<select name="FooName" [(ngModel)]="selectedFoo">
  <option>--Select--</option>
  <option *ngFor="let foo of foos" [ngValue]="foo" >{{foo.Name}}</option>
</select>
<input type="hidden" [value]="selectedFoo?.Address" name="FooAddress" />

//Assuming your 'foo' items are e.g. { ID: 1, Name: 'Hello', Address: '123 Hello St'}

Here you can bind the Address property of the selectedFoo directly to your hidden input field, rather than needing to handle the (change) event.

