Как реализовать автозаполнение материала для поля формы formarray внутри группы форм - PullRequest
Новая
       12

Как реализовать автозаполнение материала для поля формы formarray внутри группы форм

1 голос
/ 22 октября 2019

Я работаю над Angular 6. У меня есть formGroup с formArray. Поля formArray могут быть добавлены динамически. Мне нужно добавить автозаполнение материала для поля формы formArray. Это не происходитЯ следовал Как использовать mat-autocomplete (Angular Material Autocomplete) внутри FormArray (Reactive Forms) this. Однако это не работает. Когда значение изменяется в formField, функция не запускается. 

export interface IBrand {
    BrandId: string;
    BrandName: string;
}
//.......................
brandDatas: Observable<IBrand[]>[] = [];
bran: IBrand[] = [
    { "BrandId": "1234", "BrandName": "Apple" },
    { "BrandId": "12344", "BrandName": "Samsung" },
    { "BrandId": "12345", "BrandName": "Oppo" },
    { "BrandId": "12347", "BrandName": "Sony" },
    { "BrandId": "12349", "BrandName": "Panasonic" },

]

this.formGroup = this.fb.group({

    PurchaseDate: new FormControl('', [Validators.required]),
    BillNo: new FormControl('', [Validators.required]),
    TotalCash: new FormControl(''),
    Total: new FormControl(''),
    ProductInformation: this.fb.array([
});

ngOnInit() {
    const productInformation = this.fb.group({
        ProductCategoryId: [''],
        BrandId: [''],
        ProductId: [''],
    })
    this.multipleform.push(productInformation);
    this.totalValue = 0;
    this.ManageNameControl(0);
}

ManageNameControl(index: number) {
    var arrayControl = this.formGroup.get('ProductInformation') as FormArray;
    let item = arrayControl.at(index);

    this.brandDatas[index] = item.get('BrandId').valueChanges
        .pipe(
            startWith(''),
            map(value => this._filterBrand(value))
        );
}

_filterBrand(name: string): IBrand[] {
    return this.bran.filter(opt =>
        opt.BrandName.toLowerCase().includes(name.toLowerCase()));
}

displayBrand(brand?: IBrand): string | undefined {
    return brand ? brand.BrandName : undefined;
}

Inside html 

<div formArrayName="ProductInformation">
    <div *ngFor="let productInformation of multipleform.controls; let i=index" [formGroupName]="i">
       ...
        <mat-form-field fxFlex="12%">
          <input [formControl]="BrandCtrl" matInput placeholder="Brand"
                     [matAutocomplete]="auto" formControlName="BrandId" minlength="3" />
            <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayBrand">
               <mat-option *ngFor="let brand of brandDatas[i] | async" [value]="brand">
                  <span>{{brand.BrandName}}</span>
               </mat-option>
             </mat-autocomplete>
          </mat-form-field>
       ...
    </div>
</div>

При отладке функция ManageNameControl вызывается сначала и когда формаполе добавляется динамически, и значениеChanges срабатывает только в это время. После этого valueChanges не срабатывает при изменении текста в поле Brand. Как можно решить эту проблему? Как можно реализовать этот вид автозаполнения materail.

1 Ответ

0 голосов
/ 22 октября 2019

Ссылка на шаблон должна быть уникальной в вашем документе. В вашем случае MatAutocomplete можно использовать повторно, потому что он имеет те же функции. Если вы поместите ваш MatAutocomplete вне вашего ngFor цикла, он должен работать. 

<div formArrayName="ProductInformation">
    <div *ngFor="let productInformation of multipleform.controls; let i=index" [formGroupName]="i">
       ...
        <mat-form-field fxFlex="12%">
          <input [formControl]="BrandCtrl" matInput placeholder="Brand"
                     [matAutocomplete]="auto" formControlName="BrandId" minlength="3" /
          </mat-form-field>
       ...
    </div>
</div>
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayBrand">
   <mat-option *ngFor="let brand of brandDatas[i] | async" [value]="brand">
       <span>{{brand.BrandName}}</span>
    </mat-option>
</mat-autocomplete>
...