在选择更改根据值 FormArray Angular 7 显示 div 内容答案

【问题标题】：On Select change show div content according to value FormArray Angular 7在选择更改根据值 FormArray Angular 7 显示 div 内容
【发布时间】：2019-11-02 02:48:56
【问题描述】：

我正在使用 Angular 7 开发一个表单，我使用的是 Reactive Form，其中包含 FormArray。

每个FormArray中有<select></select>控件

这是表单结构

this.form = this.formBuilder.group({
      'listid': ['', [Validators.required]],
      'segmentName': ['', [Validators.required]],
      'description': ['', [Validators.required]],
      listFieldArray: this.formBuilder.array([])
    });

这是 FormArray 结构

addListFieldsFormGroup(name: string, value: string): FormGroup {
    return this.formBuilder.group({
      'condition': ['', [Validators.required]],
      'name': [name],
      'value': [value, [Validators.required]],
      'type': ['1', [Validators.required]],
      'operator': ['', [Validators.required]],
      'operand': ['', [Validators.required]]
    });
  }

FormArray 中的condition 是一个选择控件，在这个选择的变化上，我想根据值显示Div

<div class="clr-row">
          <clr-select-container>
            <select clrSelect formControlName="sentCondition">
              <option value="">Select </option>
              <option value="custom">Custom</option>
              <option value="between">Between</option>
              <option value="lessThenEqual">Less then or Equal</option>
              <option value="moreThen">More then</option>
            </select>
          </clr-select-container>
        </div>
        <div class="clr-row" *ngIf="sentCondition==='custom'">
          <div class="clr-col-4 ">
            <input clrInput placeholder="From Day" type="date" formControlName="customDayFrom" />
          </div>
          <div class="clr-col-4 ">
            <input clrInput placeholder="To Day" type="date" formControlName="customDayTo" />
          </div>
        </div>
        <div class="clr-row" *ngIf="sentCondition==='between'">
          <div class="clr-col-4 ">
            <input clrInput placeholder="From Day" formControlName="customDayFrom" />
          </div>
          <div class="clr-col-4 ">
            <input clrInput placeholder="To Day" formControlName="customDayTo" />
          </div>
        </div>
        <div class="clr-row" *ngIf="sentCondition==='lessThenEqual' || sentCondition==='moreThen'">
          <div class="clr-col-4 ">
            <input clrInput placeholder="Day" formControlName="customDayFrom" />
          </div>
        </div>

它与 [(ngModel)] 一起工作，但现在它在 Angular 7 中已被弃用，带有 Reactive Form。

【问题讨论】：

标签： angular angular7 formarray

【解决方案1】：

你可以在选择类似的东西时使用散列

 <select clrSelect formControlName="sentCondition" #someHashName>

然后在 div 上使用 if condition 之类的东西

<div *ngIf="someHashName?.value == 'yourcondition'">

【讨论】：