Привязать выбранный идентификатор выпадающего к входу и рассматривать его как значение по умолчанию - PullRequest
Новая
       31

Привязать выбранный идентификатор выпадающего к входу и рассматривать его как значение по умолчанию

0 голосов
/ 10 февраля 2019

Я написал приложение CRUD для вставки данных в базу данных с помощью ngForm.в этой форме я добавил раскрывающийся список и вход, при изменении значения раскрывающегося списка также изменяется вход (идентификатор опции выбора), здесь я добавил свой код разметки: 

<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>

и вот мой код компонента: 

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];
        }
      }
  }

Я хочу добавить значение ввода, которое по умолчанию, в базу данных, но я думаю, должен рассмотреть (ngmodelchange), и я не знаю, как.пробовал разные методы, но ни один из них не был полезен.

Спасибо ....

1 Ответ

0 голосов
/ 10 февраля 2019

Попробуйте: 

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);
  }

}

И для шаблона: 

<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>

Вот Рабочий примерStackBlitz для вашего реф.

...