Как использовать автозаполнение внутри формы ngFor - PullRequest
Новая
       37

Как использовать автозаполнение внутри формы ngFor

0 голосов
/ 20 февраля 2019

Я использую модуль 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 Я не знаю, как это сделать.

1 Ответ

0 голосов
/ 21 февраля 2019

Из того, что я вижу, у вас есть несколько входов в FormArray, каждый из которых нуждается в автозаполнении, что означает, что вам нужен массив автозаполнений.

Кажется, вы хотите иметь автозаполнение для всех входов.Это кажется трудным для меня, так как каждый вход может иметь различную ценностьЭто правда, что только один автозаполнение будет активным одновременно, но тогда вам нужно знать, какой ввод находится в фокусе, и я не знаю, как это сделать.

Итак, основываясь на этом, я пытаюсь реализоватьмассив автозаполнения.Вы можете увидеть результат здесь.https://stackblitz.com/edit/template-angular7-material-primeng-5rfzmd

Я поместил там фиктивные данные 

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

, чтобы вы могли попробовать автозаполнение.

...