在 Select 上根据值 FormArray Angular 7 更改显示 div 内容

Question

我正在 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]]
    });
  }

condition在FormArray中是一个Select控件，根据这个select，我想根据值

显示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。

Answer 1

您可以在 select 上使用散列，例如

 <select clrSelect formControlName="sentCondition" #someHashName>

然后在 div 使用 if condition 类似

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

在 Select 上根据值 FormArray Angular 7 更改显示 div 内容

On Select change show div content according to value FormArray Angular 7

angular

formarray

angular7