根据使用 formControlName - ReactiveForms 选择的下拉菜单设置输入值答案

【问题标题】：set value of input based on the dropdown selected using formControlName - ReactiveForms根据使用 formControlName - ReactiveForms 选择的下拉菜单设置输入值
【发布时间】：2020-03-24 20:55:57
【问题描述】：

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

<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 不是必需的。帮助我如何实现这一目标

【问题讨论】：

标签： angular angular-reactive-forms formgroups

【解决方案1】：

试试这个

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

我假设您的表单组是“表单”

<form [formGroup]="form">

【讨论】：

【解决方案2】：

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

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

示例：

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

【讨论】：

我不想使用 ngmodel。因为如果我同时使用 ngModel 和 formcontrol，我会收到错误消息。说“看起来您在与 formControlName 相同的表单字段上使用 ngModel。Angular v6 已弃用支持使用 ngModel 输入属性和 ngModelChange 事件与反应式表单指令，并将在 Angular v7 中删除。”
因此，只需为价格输入创建一个 formControl 并在顶部创建一个更改侦听器，只要触发该侦听器，您就可以将价格 formControl 值设置为与顶部表单控件中写入的名称相同的值。