Вложенные таблицы угловых простых чисел (p-таблица) - проверка формы с использованием реактивной формы - PullRequest
Новая
       9

Вложенные таблицы угловых простых чисел (p-таблица) - проверка формы с использованием реактивной формы

0 голосов
/ 31 января 2019

Я пытаюсь создать вложенную таблицу, используя простую p-таблицу ng (турбо-таблицу) с проверкой формы - подход, основанный на реактивном подходе.

Здесь я реализовал код, который не может редактировать / обновлятьзначение либо текстовое поле, либо p-inputmast.

Вот URL-адрес редактора stackblitz: https://stackblitz.com/edit/primeng-tables-tc5kpq

Я могу добиться этого с помощью обычного HTML-тега.Но мне нужно исправить это, используя primeng p-table.

app.component.ts 

ngOnInit() {
    this.tableData = [
      [
        { name: 'Jack', age: 20 },
        { name: 'Mac', age: 22 },
        { name: 'Lightening', age: 42 },
      ],
      [
        { name: 'Jack1', age: 20 },
        { name: 'Mac2', age: 22 },
        { name: 'Lightening3', age: 42 },
      ]
    ];
    this.initilize();
  }
  initilize(){
    this.appForm = this.fb.group({
      tables: this.fb.array([])
    });

    const ctrlTables = <FormArray> this.appForm.controls.tables;

    this.tableData.forEach(tableObj=>{
      ctrlTables.push(this.initTable(tableObj));
    })
  }

  initTable(table: Array<Person>): any {
    let tempTable = new FormArray([]);
    table.forEach((row, index) => {
      tempTable.push(this.fb.group({
        name: row.name,
        age: new FormControl({ value: row.age, disabled: row.ageEditable }, Validators.compose(
          [Validators.required])),
      }));
    });
    return tempTable;
  }

app.component.html 

<div [formGroup]="appForm">
    <div formArrayName="tables" class="flex-container" *ngIf="tableData && tableData.length > 0;else errorContent">

        <div [formGroupName]="tableIndex" *ngFor="let table of appForm.get('tables').controls; let tableIndex = index">
            <div>{{table}} - {{table.value.length}}</div>
            <div *ngIf="table && table.value.length > 0">
                <p-table name="tableIndex]" [columns]="tableHeader" [value]="table.value">
                    <ng-template pTemplate="header" let-columns>
                        <tr>
                            <th class="th-prod-name" colspan="4">
                                <div>Table - {{tableIndex}}</div>
                            </th>
                        </tr>
                        <tr>
                            <th *ngFor="let col of columns; let index=index;">
                                <div class="table-header">
                                    {{col.headerDisplayName}}
                                </div>
                            </th>
                        </tr>
                    </ng-template>
                    <ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex">
                        <tr [formGroupName]="rowIndex">
                            <td>{{rowData.name}}</td>
                            <td>
                                <p-inputMask formControlName="age" mask="?99"></p-inputMask>
                            </td>
                        </tr>
                    </ng-template>
                </p-table>
            </div>
        </div>
    </div>
</div>

I'mможет редактировать текстовое поле / маску ввода p с обычной таблицей, но не может редактировать с использованием простого таблицы.

Вот URL-адрес редактора stackblitz: https://stackblitz.com/edit/primeng-tables-tc5kpq

Можете ли вы помочьмне на это.

Ценю вашу помощь !!!

1 Ответ

0 голосов
/ 06 марта 2019

Проблема в том, что вы перебираете данные tableData (который является Person [] []).Таким образом, если вы считаете, что находитесь в контексте FormGroup, это не так.

Вы не обращаетесь к formGroup (т.е. пусть таблица appForm.get ('tables'). Элементами управления являются FormArrays, которые содержатFormGroup (для каждого человека)).И поскольку вы не обращаетесь к formGroup, formControlName не имеет значения.

...