Question

我遇到了一个问题，如何创建一个已过滤的自动完成列表并在不同的表单数组控件中使用它。

我的表单模型：

 this.prodForm = this.fb.group({
            date: ['', Validators.required],
            priority: ['', Validators.required],
            products: this.fb.array([])
        });

 var product = this.fb.group({
        name: '',
        isTrial: '',
    })

自动填充列表：

this.filteredMachineProducts = this.productCtrl.valueChanges.
        startWith(null).
        map(name => this.filterMachineProducts(name));

 filterMachineProducts(val: string) {
    return val ? this.machineProducts.filter((s) => s.name.match(new RegExp(val, 'gi'))) : this.machineProducts;
}

前面：

<div formArrayName="products">
  <div *ngFor="let product of products.controls; let p=index" [formGroupName]="p">
    <mat-expansion-panel [expanded]="true">
      <mat-expansion-panel-header>
        <mat-panel-title>
          Produkt #{{p + 1}}
          <mat-panel-description>
            &nbsp;
            <button mat-raised-button color="primary" type="button" (click)="removeProduct(p)">Usuń</button>
          </mat-panel-description>
        </mat-panel-title>
      </mat-expansion-panel-header>
      <div fxLayout="row" fxLayoutWrap="wrap">
        <div fxFlex.gt-sm="25" fxFlex.gt-xs="50" fxFlex="100">
          <mat-form-field>
            <input matInput placeholder="Asortyment" [matAutocomplete]="productAutoComplete" [formControl]="productCtrl">
          </mat-form-field>
          <mat-autocomplete #productAutoComplete="matAutocomplete" [displayWith]="displayFn">
            <mat-option *ngFor="let machineProduct of filteredMachineProducts | async" [value]="machineProduct" (onSelectionChange)="getProductMachine(machineProduct, p)">
              <span>{{ machineProduct.name }}</span>
            </mat-option>
          </mat-autocomplete>
        </div>

此时我使用单独的formControl但它应该是formControlName =＆＃34; name＆＃34;。

我应该为循环中的每个自动完成创建过滤列表吗？

Answer 1

是的，您需要为每个自动完成功能创建一个过滤列表。

我已经回答了here这样的问题。

角度自动完成，带有以反应形式的表单数组中的过滤器

1 个答案: