在Angular的表中添加动态行 [英] Adding a dynamic row in a table in Angular

问题描述

当我单击添加"按钮时，我想添加一行，该表以反应式"形式存在.

I want to add a row when I click on Add button, the table exists in a Reactive form.

这是我尝试的 html文件

<tr *ngFor='let row of tableRows'>
    <div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">
        <td fxFlex="22">
            <mat-form-field appearance="outline" fxFlex="100" class="pr-4">
                <mat-label>Product </mat-label>
                <mat-select [(ngModel)]="tableRows.productId" required>
                    <mat-option *ngFor='let product of productList' [value]="product.productId">
                        {{product.name}}
                    </mat-option>
                </mat-select>
            </mat-form-field>
        </td>
        <td fxFlex="15">
            <mat-form-field appearance="outline" fxFlex="100" class="pr-4">
                <mat-label>Price </mat-label>
                <input type='number' matInput [(ngModel)]="tableRows.price" name="" id="" placeholder="Price" required>
            </mat-form-field>
        </td>
        <td fxFlex="15">
            <mat-form-field appearance="outline" fxFlex="100" class="pr-4">
                <mat-label>Loan Term </mat-label>
                <mat-select [(ngModel)]="tableRows.loanTermId" required>
                    <mat-option *ngFor='let loanTerm of loanTermList' [value]="loanTerm.loanTermId">
                        {{loanTerm.numberOfMonths}}
                    </mat-option>
                </mat-select>
            </mat-form-field>
        </td>
        <td fxFlex="15">
            <mat-form-field appearance="outline" fxFlex="100" class="pr-4">
                <mat-label>Quantity </mat-label>
                <input type='number' matInput [(ngModel)]="tableRows.quantity" name="" id="" placeholder="Quantity" required>
            </mat-form-field>
        </td>
        <td fxFlex="15">
            <mat-form-field appearance="outline" fxFlex="100" class="pr-4">
                <mat-label>Deposit </mat-label>
                <input type='number' matInput [(ngModel)]="tableRows.deposit" name="" id="" placeholder="Deposit" required>
            </mat-form-field>
        </td>
        <td fxFlex="15">
            <mat-form-field appearance="outline" fxFlex="100" class="pr-4">
                <mat-label>Total </mat-label>
                <input type='number' matInput [(ngModel)]="tableRows.total" name="" id="" placeholder="Total" required>
            </mat-form-field>
        </td>

这就是我在 ts 文件

newRow = { productId: '', price: '', loanTermId: '', quantity: '', deposit: '', total: '' };
tableRows = [{ productId: '', price: '', loanTermId: '', quantity: '', deposit: '', total: '' }];

  addTableRow() {
    this.newRow = { productId: '', price: '', loanTermId: '', quantity: '', deposit: '', total: '' };
    this.tableRows.push(this.newRow)
  }

希望我会工作.我在控制台中收到以下错误

Hoping that I'd work. I receive the following error in console

ERROR Error: 
      ngModel cannot be used to register form controls with a parent formGroup directive.  Try using
      formGroup's partner directive "formControlName" instead.

推荐答案

您不能将ngModel与FormControl一起使用.而是使用FormControlName和FormArray.在组件中，ts文件

You cannot use ngModel with FormControl. Instead Use FormControlName and FormArray. In component,ts file

 import { FormBuilder, FormGroup, FormArray, FormControl } from '@angular/forms';

在构造函数中:: constructor(private fb:FormBuilder){}

    ngOnInit() {

    /* Initiate the form structure */
    this.productForm = this.fb.group({
      pData: this._fb.array([])
    })
    this.addFormDetails();
  }

   addFormDetails {
     this.rowDataArray.push(this.BuildFormDynamic(data_from_backend));
   }

    get formData() { // use getter method to get the row array
       return this.productForm.get('pData') as FormArray;
  }

访问data_from_backend并在此处进行分配，如果为黑色，则HTML中不会显示任何数据，如果有值，则将在HTML中显示值

Access data_from_backend and assign it here, if black then no data will show in HTML, if have value then values will be displayed on HTML

    BuildFormDynamic(data_from_backend): FormGroup {
    return this._fb.group({
      abc: [data_from_backend.abc],
      def: [data_from_backend.def],
      ghi: [data_from_backend.ghi],
      jkl: [data_from_backend.jkl],
      mno: [data_from_backend.mno],
      pqr: [data_from_backend.pqr]
    });
  }

在HTML中，使用FOrmControlName访问这些变量命名您的表单元素 productForm:FormGroup; 在html文件中应使用相同的表单名称，例如::

In HTML, access these valiable using FOrmControlName Name your form elementproductForm: FormGroup; Same form name should be given in html file like this::

    `<form [formGroup]="productForm">
      <div formArrayName="pData">
    <div *ngFor="let item of formData.controls; let pointIndex=index" [formGroupName]="pointIndex">
    <label>
      Test Name: <input formControlName="abc" />
    </label>
<button type="button" (click)="deleteFormRows(pointIndex)">Delete Selling Point</button>
    </div>
<button type="button" (click)="addFormRows()">Add Selling Point</button>
  </div>
    </form>`

添加和删除行

 addFormRows() {
    this.formData.push(this.fb.group({point:''}));
  }
deleteFormRows(index) {
    this.formData.removeAt(index);
  }

这只是一个示例，请根据您的要求进行自定义.Lemme知道是否有任何问题

This is just an example, customise it according to your requirement. Lemme know if any issues

这篇关于在Angular的表中添加动态行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！