Javascript 从动态窗体内的下拉列表中选择特定选项时显示隐藏文本框

我有一个表单，用户可以单击add按钮添加一个/多个地址div

如果用户从下拉列表中选择options=5，我希望在该特定地址Div中显示和隐藏文本框

组件代码

---

在循环添加div时，可以在下拉列表中使用模板引用变量。e、 g选择，然后参考*ngIf:

    <form [formGroup]="addExpressionform">
        <div formArrayName="expressionArray">
            <div *ngFor="let item of contactFormGroup.controls; let i = index;" [formGroupName]="i">

              <carbon-dropdown #select
                                (optionSelected)="showValue($event)"
                                [formControlN]="'UOM'"
                                [options]="listOptions" [formGroup]="item"
                                name="UOM" 
                                >
                            </carbon-dropdown>

                            <carbon-text-input *ngIf="select.value == 5" 
                                [formControlN]="'Value'"
                                [formGroup]="item"
                                name="Value"
                                >
                            </carbon-text-input>
                    <carbon-button type="primary" (click)="submit()" id="save-parameter">Save</carbon-button>

            </div>                  
        </div>
    </form>

您应该通过为每一个问题创建不同的类来隔离每一种可能的问题类型，这样您就可以对数据进行整形，然后使用ngSwitch动态地创建相应的HTML

问题基类：

export class QuestionBase<T> {
  controlType: string;
  value: T;
  key: string;
  label: string;
  // etc

  constructor(options) {
    // constructor logic
  }
}

从基类继承而来的一些特殊类

import { QuestionBase } from './question-base';

export class SpecialQuestion extends QuestionBase<string> {
  controlType = 'specialQuestion';
  type: string;

  // special Question
  specialValue: string;


  constructor(options) {
    super(options);
    this.type = options['type'] || '';
  }
}

然后，一个问题组件：

<div [formGroup]="form">
  <label>{{question.label}}</label>        
  <div [ngSwitch]="question.controlType">
    // controls logic
    <input *ngSwitchCase="'textbox'" >        
    <select *ngSwitchCase="'specialQuestion'"></select>
  </div>          
</div>

然后将其放入一个容器组件中，在其中循环遍历整个问题数组

---

这样，当您向表单添加/更改功能时，您的代码将经得起未来的考验并可重用。您不必创建意大利面来满足边缘案例要求，比如额外的输入字段

你能添加开发组件的屏幕截图吗？添加了屏幕截图。。。如果我在下拉列表中选择ROM='other'，它将填充一个值文本框..但在我的例子中，我在第一个地址div中选择了ROM='other'，但在两个地址中填充了值文本框..而不是在特定的地址中。。

<div [formGroup]="form">
  <label>{{question.label}}</label>        
  <div [ngSwitch]="question.controlType">
    // controls logic
    <input *ngSwitchCase="'textbox'" >        
    <select *ngSwitchCase="'specialQuestion'"></select>
  </div>          
</div>