Bind Selected ID of Dropdown to Input and Consider it as Default Value

Question

I have written a CRUD app to insert data into firebase using ngForm. in this form i have added a Dropdown and an input, when dropdown value changes, the input (id of select option) also changes, here i have added my markup code:

<div class="form-group">
          <label>Visit Reason</label>
          <select class="form-control" name="Reason" #Reason="ngModel" [(ngModel)]="patientService.selectedPatient.Reason" (change)="onSelect($event.target.value)">
            <option disabled value=''>-- Select One --</option>
            <option *ngFor="let r of reasons" [value]="r.id">{{r.name}}</option>
          </select>
        </div>
<div class="form-group">
          <input id="txtPrice" readonly="true" style="text-align:left" name="Price" #price="ngModel" [(ngModel)]="patientService.selectedPatient.Price" value="{{selectedReason.id | number:'.0'}}" class="form-control" placeholder="Price" autocomplete="Off">
        </div>

and here's my component code:

class Reason {
  id: number;
  name: string;
}

public reasons: Reason[] = [
    { id: 60, name: "DC Visit" },
    { id: 350, name: "Inject - 1" },
    { id: 700, name: "Inject - 2" },
    { id: 500, name: "Inject - 3" },
    { id: 1000, name: "Inject - 4" }
  ];

  public selectedReason: Reason = this.reasons[''];
  onSelect(reasonId) { 
      this.selectedReason = null;
      for (var i = 0; i < this.reasons.length; i++)
      {
        if (this.reasons[i].id == reasonId) {
          this.selectedReason = this.reasons[i];
        }
      }
  }

I want to add value of input which is default, into database, but i think must consider (ngmodelchange) and i don't know how. have tried different methods but none was useful.

Thank You....

Answer 1

Give this a try:

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

class Reason {
  id?: number;
  name?: string;
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public reasons: Reason[] = [
    { id: 60, name: "DC Visit" },
    { id: 350, name: "Inject - 1" },
    { id: 700, name: "Inject - 2" },
    { id: 500, name: "Inject - 3" },
    { id: 1000, name: "Inject - 4" }
  ];

  public selectedReason: Reason = {};
  public selectedPatient = {};

  onSelect(reasonId) {
    this.selectedPatient.Price = reasonId;
  }

  onSubmit() {
    console.log(this.selectedPatient);
  }

}

---

And for the template:

<form>
  <div class="form-group">
    <label>Visit Reason</label>
    <select class="form-control" name="Reason" [(ngModel)]="selectedPatient.Reason" (change)="onSelect($event.target.value)">
      <option disabled value='null'>-- Select One --</option>
      <option *ngFor="let r of reasons" [value]="r.id">{{r.name}}</option>
    </select>
  </div>

  <div class="form-group">
    <input id="txtPrice" readonly="true" name="Price" [(ngModel)]="selectedPatient.Price" class="form-control" placeholder="Price" autocomplete="Off">
  </div>

  <button type="button" (click)="onSubmit()">Submit</button>

</form>

---

Here's a Working Sample StackBlitz for your ref.