**Edited to remove irrelevant code.**

I am trying to print the form object to the console but the selected option is not being displayed. It is showing as *undefined* in console.

[![enter image description here](https://i.stack.imgur.com/LCQxZ.png)](https://i.stack.imgur.com/LCQxZ.png)

I have put the codes below. If somebody can guide on what is wrong with this particular code it would be helpful. Let me know if any additional information is required.

**Component.html:**

```
<form #f="ngForm" (ngSubmit)="save(f.value)">

....

  <div class="form-group">
    <label for="category">Category</label>
    <select ngModel name="category" id="category" class="form-control">
      <option value=""></option>
      <option *ngFor="let c of categories$ | async" [value]="c.key">
        {{ c.name }}
      </option>
    </select>
  </div>

....

```

**Component.ts:**

```
import { CategoryService } from './../../category.service';

....

export class ProductFormComponent implements OnInit {

  categories$;

  constructor(categoryService: CategoryService) {
    this.categories$ = categoryService.getCategories();
  }

  save(product) {
    console.log(product);
  }

....

```

**Category.Service.ts:**

```
import { AngularFireDatabase } from 'angularfire2/database';

....

  getCategories() {
    return this.db
      .list('/categories', ref => ref.orderByChild('name'))
      .valueChanges();
  }

....

```

I want to get the value highlighted from the Firebase database to be captured in the object. If I put c.name I am getting the user friendly name.

[![Firebase database structure.](https://i.stack.imgur.com/iEBro.png)](https://i.stack.imgur.com/iEBro.png)