0

我有一个 ngx 数据表，它显示来自 json 对象的数据，其中包含行项。但我想将表单验证器添加到表上的输入字段。

我有单元格模板来显示每列的自定义字段。我调查要向表中添加表单控件，您应该使用 formarray 问题是当添加 ngFor 时，我的字段的输入消失了

<div [formGroup]="tableValidate">
  <prx-card>
    <prx-card-body class="prx-card-body-pya">
      <ng-container *ngIf="usersTemplate && usersTemplate.length; else loadingList">
        <ngx-datatable
          class="listview responsive"
          [rows]="usersTemplate"
          [columns]="columns"
          [columnMode]="ColumnMode.force"
          headerHeight="auto"
          [rowHeight]="false"
          footerHeight="auto"
          [limit]="5"
          [selectionType]="SelectionType.checkbox"
          [selectAllRowsOnPage]="false"
          (select)="onSelect($event)"
          [summaryRow]="enableSummary"
          [summaryPosition]="summaryPosition"
          [summaryHeight]="0"
        >
          <ngx-datatable-footer>
            <ng-template
              ngx-datatable-footer-template
              let-rowCount="rowCount"
              let-pageSize="pageSize"
              let-selectedCount="selectedCount"
              let-curPage="curPage"
              let-offset="offset"
            >
              <div style="padding: 5px 10px">
                <div>
                  <strong>Totales</strong>: Lunes: {{ totalLunes }} | Martes: {{ totalMartes }} | Miércoles:
                  {{ totalMiercoles }} | Jueves: {{ totalJueves }} | Viernes: {{ totalViernes }}
                </div>
                <hr style="width: 100%" />
                <div>Filas: {{ rowCount }} | Página actual: {{ curPage }} | Seleccionados: {{ selectedCount }}</div>
              </div>
            </ng-template>
          </ngx-datatable-footer>
        </ngx-datatable>
      </ng-container>

      <ng-template #loadingList>
        <prx-loader template="list" [isLoading]="isLoading" [count]="2"></prx-loader>
      </ng-template>
    </prx-card-body>
  </prx-card>
  <!--SELECT-->
  <ng-template #selectTemplate let-value="value" let-row="row" let-column="column" let-rowIndex="rowIndex">
    <div class="pya-cell">
      <small class="text-muted d-block d-lg-none">{{ column.name }}</small>
      <span
        *ngIf="!appearSelectColumn[rowIndex][column.name]"
        (dblclick)="appearSelect(rowIndex, column.name, value)"
        >{{ value }}</span
      >
      <label *ngIf="appearSelectColumn[rowIndex][column.name]">
        <select class="form-control form-control-sm">
          <option *ngFor="let option of options">{{ option.nombre }}</option>
        </select>
      </label>
    </div>
  </ng-template>
  <ng-template formArrayName="filas"
               *ngFor="let filas of filasValidator.controls; let i = index"
               #inputTemplate
               let-value="value"
               let-row="row"
               let-column="column"
               let-rowIndex="rowIndex">
    <label [formGroupName]="i" class="pya-cell">
      <small class="text-muted d-block d-lg-none">{{ column.name }}</small>
      <!--REVISAR VALUE, DA ERROR DE REASIGNACION -->
      <input
        (input)="editHour(rowIndex, column.prop, $event)"
        formControlName="dia"
        type="number"
        value="{{ value }}"
        class="number text-center w-50 form-control light"
      />
    </label>
  </ng-template>
  <!--CHECKBOX-->
  <ng-template
    #checkboxTemplate
    let-column="column"
    let-isSelected="isSelected"
    let-onCheckboxChangeFn="onCheckboxChangeFn"
  >
    <label class="pya-cell">
      <small class="text-muted d-block d-lg-none">{{ column.name }}</small>
      <prx-checkbox [checked]="isSelected" (onChanged)="onCheckboxChangeFn($event)"></prx-checkbox>
    </label>
  </ng-template>
  </div>

在此处输入图像描述

4

0 回答 0