автозаполнение отображения id_product с помощью Angular6 - PullRequest
Новая
       6

автозаполнение отображения id_product с помощью Angular6

0 голосов
/ 11 октября 2018

Рядом с этой записью я могу опубликовать этот результат ["1", "2", "3"], но у меня есть другая проблема.

Когда я выбираю продукт, в поле зренияпоказать id, 1, 2 и 3, а не название продукта.как в image

Я меняю функцию updateForm() как показано ниже: 

products: Products[] = []; 

 updateForm(ev: any, idd: any, componentid: any) {
    if (ev.isUserInput) {
      if (componentid === 'products_name') {
      this.prodId = idd;
      for (let i = 0; i < this.products.length; i++) {
      if (this.products[i].products_id=== idd) {
      console.log(this.products[i].products_name) //in this part I can see product name
    this.myForm.controls.products_id.setValue(this.products[i].products_name)
          }
        }
      } else {
        console.log('error');
      }
    }
  }

И мой HTML-код выглядит так: 

  <div class="row">
    <div class="input-field col s10">
      <div class="form-group">
        <div formArrayName="products_id">
          <div *ngFor="let p of myForm.get('products_id').value; let i = index">
            <input  formControlName="{{i}}" id="products_id" type="text"  aria-label="Number" matInput
              [matAutocomplete]="auto">
            <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" [displayWith]="displayWith">
              <mat-option (onSelectionChange)="updateForm($event, pro.products_id, 'products_name')" *ngFor="let pro of filteredProduct | async"
                [value]="pro.products_id">
                {{pro.products_name}} 
              </mat-option>
            </mat-autocomplete>
            <div class="button-left">
                <button *ngIf="myForm.controls.products_id.value.length > 1" type="button" class="fa" (click)="onRemoveItem(i)">-</button>
              </div>
          </div>

        </div>
      </div>
    </div>
    <div class="input-field col s2">
      <button type="button" class="btn" (click)="onAddItem()">+</button>
    </div>
  </div>

Любая идея, пожалуйста?Как отобразить имя_продукта?

Спасибо!

1 Ответ

0 голосов
/ 11 октября 2018

Произошла ошибка с вашим шаблоном и с вашим методом updateFormProducts.

Вот исправления: 

updateFormProducts(ev: any, idd: any, componentid: any, index) {
  console.log(ev.source.viewValue)
  console.log(componentid)
  if (ev.isUserInput) {
    if (componentid === 'products_id') {
      console.log(ev.source.viewValue);
      ( < FormArray > this.myform.get('products_id')).at(index).patchValue(ev.source.viewValue);
    } else {
      console.log('error');
    }
  }
}

В этом методе вам нужно будет передать индексполе State в вашем FormArray, а затем вызовите patchValue только для того поля, которое вы сможете получить, используя (<FormArray>this.myform.get('products_id')).at(index)

Затем в вашем шаблоне вам также необходимо исправить некоторые вещи.Вот ваш обновленный шаблон: 

<form [formGroup]="myform" (ngSubmit)="onAddprod()" class="example-form">
  <div class="form-group">
    <div formArrayName="products_id">
      <div *ngFor="let s of myform.get('products_id').controls; let i = index">
        <mat-form-field class="example-full-width">
          <input [formControlName]="i" matInput placeholder="State" aria-label="State" [matAutocomplete]="auto">

          <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayWith">
            <mat-option *ngFor="let state of filteredStates | async" (onSelectionChange)="updateFormProducts($event, state.products_name, 'products_id', i)" [value]="state.products_id">
              <span>{{state.products_name}}</span>
            </mat-option>
          </mat-autocomplete>

        </mat-form-field>
      </div>
      <div class="input-field col s2">
        <button type="button" class="btn" (click)="onAddItem()">+</button>
      </div>
    </div>
  </div>

  <br>

  <div class="input-field col s2">
    <input formControlName="unit_price" id="unit_price" type="text">
  </div>
  <button type="submit" class="btn waves-effect waves-light">Register</button>
</form>

Вот Обновленный StackBlitz для вашей ссылки.

ОБНОВЛЕНИЕ

Для вашей проблемы, вы можете сделать это:

В шаблоне создайте getter: 

get productIdFormArray () {
  return (<FormArray>this.myform.get('products_id')).controls;
}

И в шаблоне вы можете использовать productIdFormArray, чтобы перебрать FormArray: 

...
<div *ngFor="let s of productIdFormArray; let i = index">
  <mat-form-field class="example-full-width">
...

Вы также можете найти изменения в обновленном StackBlitz.

...