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控件，对此选择，我想根据值显示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中使用了反应式表单。

Answer 1

您可以在选择类似的内容时使用哈希

 <select clrSelect formControlName="sentCondition" #someHashName>

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

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

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

1 个答案: