Angular表单过滤器输入类型切换异常问题求助

你制作了一个包含文本和日期输入的表单过滤器，用数组arr = [1,2,3]定义过滤行数，通过*ngFor循环渲染多行表单。但遇到问题：当任意一行选择dateOfBirth字段时，所有输入行的类型都会变成日期选择器，而你期望仅当前行切换输入类型。

问题根源 #

你的模板中，判断输入类型的*ngIf条件固定使用了searchAdvanceForm.controls.field0.value——也就是只检查第一行的字段选择值，所以不管哪一行选择了dateOfBirth，所有行都会同步切换输入类型。

修复代码 #

把判断条件里的field0替换为当前循环索引i对应的控件，使用searchAdvanceForm.get(field${i})?.value来判断当前行的字段类型：

<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.get(`field${i}`)?.value !== 'dateOfBirth'" class="textFilter" type="text"
           formControlName="valueSearch{{i}}">

    <nz-date-picker *ngIf="searchAdvanceForm.get(`field${i}`)?.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>

可选优化 #

• 把字段类型判断逻辑抽成组件方法，让模板更简洁：

  isDateField(index: number): boolean {
    return this.searchAdvanceForm.get(`field${index}`)?.value === 'dateOfBirth';
  }
  

  模板调用方式：

  <input *ngIf="!isDateField(i)" class="textFilter" type="text" formControlName="valueSearch{{i}}">
  <nz-date-picker *ngIf="isDateField(i)" [nzFormat]="dateFormat" formControlName="valueSearchDate{{i}}"></nz-date-picker>
  

• 如果不需要区分文本和日期的表单控件名，可以共用同一个formControlName，根据字段类型切换输入组件，减少表单控件数量。

内容的提问来源于stack exchange，提问作者Toof_LD