如何在角度应用程序中创建表单过滤器

Question

我想制作一个具有 2 个主要类型输入的高级过滤器是文本和日期类型，我创建数组

arr = [1,2,3]

它是过滤器的行数。但是当我 for 循环然后将标签更改为出生日期，所有输入行都改变了。

我的模板文件：

  <form [formGroup]="searchAdvanceForm">
            <div class="filter" *ngFor="let item of filterRow; let i= index;">
              <div>{{i + 1}}</div>
              <ng-select [items]="fieldFilter" bindLabel="label" bindValue="value" placeholder="---Choose---"
                         [closeOnSelect]="true" [clearable]="true" formControlName="field{{i}}">
              </ng-select>

              <input *ngIf="searchAdvanceForm.controls.field0.value !== 'dateOfBirth'" class="textFilter" type="text"
                     formControlName="valueSearch{{i}}">

              <nz-date-picker *ngIf="searchAdvanceForm.controls.field0.value === 'dateOfBirth'"
                              [nzFormat]="dateFormat" formControlName="valueSearchDate{{i}}"></nz-date-picker>

              <ng-select [items]="operatorFilter" bindLabel="label" bindValue="value" placeholder="---Choose---"
                         [closeOnSelect]="true" formControlName="operatorSearch{{i}}"></ng-select>
            </div>
  </form>

这是我正常时的用户界面

当我选择出生日期字段，表单会像这样

我期待当我选择出生日期仅此行更改类型输入

Answer 1

您只引用controls.field0，但您想引用同一行上的控件。

<input *ngIf="searchAdvanceForm.get('field' + i).value !== 'dateOfBirth'" ... />

<nz-date-picker
  *ngIf="searchAdvanceForm.get('field' + i).value === 'dateOfBirth'"
  ...
></nz-date-picker>