Pfthb

I have an template Driven form in my Angular application, I tried a lot but I am not able to figure out what wrong with my code.

I want to return the selected value from select list and save it to the Firebase database.I have 5 input fields all fields are returning the data and i am able to save to the Firebase except select list value whose data returns as undefined.

This is my template-driven form code:

<div class="formalign">
 <form #f="ngForm" (ngSubmit)="save(f.value)">
 <div class="form-group">
 <label for="title">Title</label>
 <input ngModel name="title" id="title" type="text" class="form-control">
 </div>
 <!--for Price-->
 <div class="form-group">
 <label for="price">Price</label>
 <div class="input-group-prepend">
 <span class="input-group-text">INR</span>
 <input ngModel name="price" id="price" type="number" class="form-control">
 </div>
 </div>
 <!--category-->
 <div class="form-group">
 <label for="catagory">Catagory</label>
 <select ngModel name="catagory" id="catagory" class="form-control">
 <option value=""></option>
 <option *ngFor="let c of valuearray" [value]="c.$key">
 c.name
 </option>
 </select>
 </div>
 <!--Image-->
 <div class="form-group">
 <label for="image">Image</label>
 <input ngModel name="imageurl" id="image" type="text" class="form-control">
 </div>
 <!--Save Button-->
 <button class="btn btn-primary">Save</button>
 </form>
</div>

After clicking on Save button catagory select list returns undefined value.
How i can resolve that?

Below is my Two-way data bidning update with component code:-

 <div class="form-group">
 <label for="catagory">Catagory</label>
 <select [(ngModel)]="catagoryData" name="catagoryData" id="catagoryData" class="form-control">
 <option value=""></option>
 <option *ngFor="let c of valuearray" [value]="c.$key">
 c.name
 </option>
 </select>
 </div>

In my component.ts i am trying to print the value but it is still giving me undefined value:-

catagoryData:string;
 console.log("The Catagory",this.catagoryData);

Here is the two-way data binding example from Angular Template Driven Forms. You need to two-way bind your select's ngModel to a property on your controller, in this case model.power.

<div class="form-group">
 <label for="power">Hero Power</label>
 <select class="form-control" id="power"
 required
 [(ngModel)]="model.power" name="power">
 <option *ngFor="let pow of powers" [value]="pow">pow</option>
 </select>
</div>