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

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

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

{{service.name}
您是否尝试过在输入字段中使用[（ngModel）]？与ngModel绑定到表单控件值等效

您可以在.ts文件中使用回调函数，ngModel将与之相等

例如：

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

试试这个

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



我猜你的表单组是“表单”


我不想使用ngmodel。因为如果我同时使用ngModel和formcontrol，我会收到一个错误。表示“看起来您在与formControlName相同的表单字段上使用了ngModel。Angular v6中已不推荐使用ngModel输入属性和ngModelChange事件以及反应式表单指令，并将在Angular v7中删除。”因此，只需为price输入创建一个formControl，并在顶部创建一个change监听器，只要触发监听器，就可以将price formControl值设置为与顶部表单控件中写入的名称等效的值。
<input type="number" value="{{form.controls['service'].value.price}}" />

<form [formGroup]="form">