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中有多个输入，每个输入都需要一个AutoComplete，这意味着您需要一个AutoCompletes数组。

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

因此，在此基础上，我尝试实现一个AutoComplete数组。您可以在这里看到结果。 https://stackblitz.com/edit/template-angular7-material-primeng-5rfzmd

我在其中放置了一个模拟数据

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

因此您可以尝试自动完成。

如何在ngFor表单中使用AutoComplete

1 个答案: