如何在 ngFor 表单中使用自动完成

Question

我正在使用 Angular Material AutoComplete 模块，我已经让它在使用简单输入时工作。但我真的想在模块内的 ngFor 中使用它。

我设法让它几乎可以工作，但我无法让它过滤选项。这是我的 html:

<form novalidate [formGroup]="productForm" (ngSubmit)="onSubmit()">
  <mat-card>
    <mat-card-content>
      <mat-form-field>
        <input type="text" matInput [matDatepicker]="picker" formControlName="data" required>

        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
      </mat-form-field>

      <mat-divider></mat-divider>

      <!-- Product -->
      <div formArrayName="products">
        <div *ngFor="let item of productForm.get('products').controls; let i = index">
          <div [formGroupName]="i">
            <mat-form-field>
              <input type="text" placeholder="product" matInput formControlName="product" [matAutocomplete]="product" required>
              <mat-autocomplete #product="matAutocomplete" [displayWith]="displayFn">
                <mat-option *ngFor="let option of filterProduct | async" [value]="option">
                  {{option.nome}}
                </mat-option>
              </mat-autocomplete>
            </mat-form-field>

            <mat-divider></mat-divider>
          </div>
        </div>
      </div>

      <button mat-raised-button color="primary" [disabled]="productForm.disabled" type="button" (click)="newProduct()">New Product</button>
    </mat-card-content>

    <mat-card-actions>
      <button mat-raised-button color="primary" [disabled]="productForm.disabled">Add</button>
    </mat-card-actions>
  </mat-card>
</form>

和组件：

public products: any;
public productForm: FormGroup;
public filterProduct: Observable<any>;

constructor(
    private _store: StoreService,
) {
    this.products = this._store.insumo;
}

ngOnInit() {
    this.productForm = new FormGroup({
    data: new FormControl(new Date(), Validators.required),
    products: new FormArray([]),
    });

    this.newProduct();

    this.filterProduct= this.productForm.get('product').valueChanges
    .pipe(
        startWith(''),
        map(value => typeof value === 'string' ? value : value.nome),
        map(nome => nome ? this._filterProduct(nome) : this.insumos.slice())
    );
}

private _filterProduct(nome: string) {
    const _filterValue = nome.toLowerCase();

    return this.products.filter(option => option.nome.toLowerCase().includes(_filterValue));
}

public displayFn(object): string | undefined {
    return object ? object.nome : undefined;
}

public newProduct():void {
    const control = <FormArray>this.productForm.get('products');

    control.push(new FormGroup({
    product: new FormControl(null, Validators.required),
    }));
}

public onSubmit() {
    console.log(this.productForm);
}

我认为问题出在函数 filterProduct 上，因为我需要获取输入值，因为它在 ngFor 中，我不知道该怎么做。

Answer 1

据我所知，您在一个 FormArray 中有多个输入，每个输入都需要一个自动完成，这意味着您需要一个自动完成数组。

您似乎希望所有输入都具有自动完成功能。这对我来说似乎很难，因为每个输入可能有不同的价值。的确，一次只有一个自动完成功能处于活动状态，但是您需要知道哪个输入处于焦点，我不知道该怎么做。

基于此，我尝试实现一个自动完成数组。你可以在这里看到结果。 https://stackblitz.com/edit/template-angular7-material-primeng-5rfzmd

我在那里放了一个模拟数据

 this.products = [{ nome: 'ab' }, { nome: 'cd' }, { nome: 'abcd' }];

所以你可以尝试自动完成。

如何在 ngFor 表单中使用自动完成

How to use AutoComplete inside ngFor form

angular

angular-material

angular-forms