Не получить входные значения, присутствующие внутри таблицы, используя Angular - PullRequest
Новая
       1

Не получить входные значения, присутствующие внутри таблицы, используя Angular

0 голосов
/ 06 февраля 2020

У меня есть несколько полей ввода внутри ячейки таблицы, но я не могу получить эти значения, используя Angular 8. Мои коды приведены ниже. 

<tr *ngFor="let opt of ConfigArr; let i = index;">
   <td class="sticky-col first-col">
      {{opt.attrName1}}({{opt.attr1}})
   </td>
   <td class="sticky-col second-col">
      {{opt.attrName2}}({{opt.attr2}})
   </td>
   <td>
      <input class="form-control" matInput placeholder="Add MRP" aria-label="MRP" [value]="opt.MRP">
   </td>
   <td>
      <input class="form-control" matInput placeholder="Add BaseUnitPrice" aria-label="BaseUnitPrice" [value]="opt.BaseUnitPrice">
   </td>
   <td>
      <input class="form-control" matInput placeholder="Add DiscountValue" aria-label="DiscountValue" [value]="opt.DiscountValue">
   </td>
   <td>
      <input class="form-control" class="form-control" matInput placeholder="MinBuyQty" aria-label="MinBuyQty" [value]="opt.MinBuyQty">
   </td>
   <td>
      <input class="form-control" matInput placeholder="Add MinimumPrice" aria-label="MinimumPrice" [value]="opt.MinimumPrice">
   </td>
   <td>
      <input class="form-control" matInput placeholder="Add TaxPercentage" aria-label="TaxPercentage" [value]="opt.TaxPercentage">
   </td>
   <td>
      <input class="form-control" matInput placeholder="Add TaxAmount" aria-label="TaxAmount" [value]="opt.TaxAmount">
   </td>
   <td>
      <input class="form-control" matInput placeholder="Add DiscountPrice" aria-label="DiscountPrice" [value]="opt.DiscountPrice">
   </td>
   <td>
      <input class="form-control" matInput placeholder="Add MaxBuyQty" aria-label="MaxBuyQty" [value]="opt.MaxBuyQty">
   </td>
   <td>
      <input class="form-control" matInput placeholder="Add MaximumPrice" aria-label="MaximumPrice" [value]="opt.MaximumPrice">
   </td>
</tr>

<button class="btn btn-md btn-primary" type="button" (click)="addImage($event, AddImages,i)">
   Add <i class="fa fa-plus"></i>
</button>

Код машинописного текста приведен ниже. 

for(let i=0; i< res['data']['Attributes'][this.ColumnNames[0]].length;i++){
   for(let j=0;j< res['data']['Attributes'][this.ColumnNames[1]].length;j++){
       let data = {
                  'attr1':res['data']['Attributes'][this.ColumnNames[0]][i],
                  'attrName1':attrName1,
                  'attr2': res['data']['Attributes'][this.ColumnNames[1]][j],
                  'attrName2': attrName2,
                  "MRP": '',
                  "BaseUnitPrice":'',
                  "DiscountValue": '',
                  "MinBuyQty":'',
                  "MinimumPrice":'',
                  "TaxPercentage":'',
                  "TaxAmount":'',
                  "DiscountPrice":'',
                  "MaxBuyQty":'',
                  "MaximumPrice":''
                }
                this.ConfigArr.push(data);
   }

addImage(event: Event, template: any, index: any) {
     console.log('all values', this.ConfigArr);
}

Здесь после ввода значений в поле ввода, когда пользователь нажимает кнопку Add, я не получаю значения поля ввода для каждой строки внутри консоли. Мне нужно после того, как пользователь введет значения ввода. Он должен быть внутри this.ConfigArr для каждой строки.

Ответы [ 3 ]

2 голосов
/ 06 февраля 2020

Вам не нужно фиксировать это явно. Вот почему angular имеет ngModel. 

<input [(ngModel)]="opt.BaseUnitPrice" class="form-control" matInput placeholder="Add BaseUnitPrice" aria-label="BaseUnitPrice" >

Так что это обновит ConfigArr напрямую.

0 голосов
/ 07 февраля 2020

Привет, пожалуйста, отметьте следующее.

HTML

<div class="form-group">
     <label>First Name</label>
     <input type="text" formControlName="firstName" class="formcontrol"/>
</div>

tile.ts 

registerForm: FormGroup;
this.registerForm = this.fb.group({
 firstName: ['', Validators.required],
)};

Пожалуйста, используйте следующую страницу Реактивная форма angular

0 голосов
/ 06 февраля 2020

Пожалуйста, используйте это следующее поле ввода. Оно будет обновлено до объекта opt при вводе значений внутри поля ввода. 

<div class="input-field">
 <label class="input-label">
 <input [(ngModel)]="opt.entityname" class="form-input" mdbInput placeholder="Enter the 
 input">
 </label>
</div>
...