Angular 9 Reactive Form - Array Form - выбор значения для автоматического заполнения других ячеек в той же строке - PullRequest
Новая
       31

Angular 9 Reactive Form - Array Form - выбор значения для автоматического заполнения других ячеек в той же строке

0 голосов
/ 16 апреля 2020

Я продолжаю свою кривую обучения в Angular, и я снова застрял, и мне стало интересно, может ли кто-нибудь мне помочь.

Сценарий
Я получил форму и внутри формы стол. Таблица содержит много ячеек, но она начинается с того, что пользователь выбирает значение из выпадающего списка. Как только пользователь выберет значение, многие другие ячейки будут заполнены автоматически (в зависимости от выбранной ячейки).

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

Вот код HTML: 

<tr *ngFor="let itemrow of myorderForm.get('itemRows')['controls']; let i=index" [formGroupName]="i">
  <td>
    <input formControlName="orderLineNumber"  type="text" placeholder="{{ i + 1 }}">
  </td>
  <td>
    <select  formControlName="productName" input id="productName" [name]="productName" type="text">
        <option *ngFor="let thisproduct of allproducts;" value="thisproduct">{{thisproduct.productName}}</option>
     </select>                                  
   </td>
   <td> 
     <input formControlName="productScaleUoM" id="productScaleUoM" [name]="itemrow.productScaleUoM+ '_' + i" type="text"  [(ngModel)]="itemrow.productScaleUoM" placeholder="{{valueScale}}">
    </td>
    <td>
      <input formControlName="pack_quantity"  id="pack_quantity" [name]="itemrow.pack_quantity+ '_' + i" type="text"   [(ngModel)]="itemrow.pack_quantity" placeholder="{{valuePack}}">
    </td>
</tr>

Файл TS выглядит так: 

addNewRow() {
  this.formArr.push(this.initItemRows());
}

onChangeObj(newObj) {
  this.productname[0] = newObj;
  this.valueScale = this.productname[0].productScaleUoM
  this.valuePack = this.productname[0].pack_quantity
}

deleteRow(index: number) {
  this.formArr.removeAt(index);
}
formControlValueChanged() {
//Just testing to see if I get the value of the product name
    this.myorderForm.get('itemRows').valueChanges.subscribe(val => {
      this.formattedMessage = `My name is ${val}.`;
      console.log("What is formatted message here", this.formattedMessage)
    });

Опять же, любая помощь будет принята с благодарностью.

1 Ответ

0 голосов
/ 16 апреля 2020

Для этого сценария Вы должны добавить несколько вещей, таких как: 

<select (change)="onChangeFunction($event)" >

функция в теге и добавить 

<option [value]="thisproduct">

Теперь вызовите функцию 

onChangeFunction(data:any){
this.list=data;
console.log(this.list); //here you will get all the data on change event
}

Пожалуйста, прокомментируйте, если вы застряли снова.

...