根据使用 formControlName 选择的下拉列表设置输入值 - ReactiveForms

Question

我有一个输入，其值应基于所选的下拉列表。这是我的代码

<div class="col-sm-9">
  <nb-select type="number" fullWidth id="service" formControlName="service">
      <nb-option *ngFor="let service of Services" [value]="service">{{service.name}} </nb-option>
  </nb-select>
</div>

<input type="number value="service.price">

我的 .ts 文件

Services: Array<any>=[
    {name: 'Consultation', price: 100}, 
    {name: 'Follow Up', price: 200}, 
    {name: '24 Hrs. Creatinine', price: 300}, 
    {name: 'Complete Blood Count - CBC', price: 400}, 
    {name: 'X-Ray', price: 500}];

So when Consultation is selected, input value should be 100. Similarly when X-ray is selected, input value should be set to 500.

我只想使用 formControl。不需要 ngModel。帮助我如何实现这个

Answer 1

您是否尝试过在输入字段中使用 [(ngModel)]？将 ngModel 绑定到表单控件值等效

您可以在 .ts 文件中使用回调函数，而 ngModel 等同于它。

示例：

getPriceEquivalent = () => {
    this.Services.forEach(x => {
      if(x.name === this.service.value){
         return x.price;
      }
    }); 
    return 0;
 }

Answer 2

试试这个

<input type="number" value="{{form.controls['service'].value.price}}" />

我假设你的表单组是 "form"

<form [formGroup]="form">

根据使用 formControlName 选择的下拉列表设置输入值 - ReactiveForms

set value of input based on the dropdown selected using formControlName - ReactiveForms

angular

angular-reactive-forms

formgroups