Создание нескольких форм с использованием ngFor - PullRequest
Новая
       20

Создание нескольких форм с использованием ngFor

0 голосов
/ 03 октября 2018

Необходимо создать форму внутри каждой детали строки данных ngx. 

<ngx-datatable-row-detail [rowHeight]="'100%'" #serviceDetailRow (toggle)="onDetailToggle($event)">
    <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
        <mat-tab-group>
        <mat-tab label="Components">
            <mat-card-actions class="component-actions">
            <form [formGroup]="addComponentForm" (ngSubmit)="addComponent(row.serviceId)">
                <mat-form-field class="add-component">
                <input matInput placeholder="Component Name" [formControl]="componentFormControl" [errorStateMatcher]="componenteMatcher">
                <mat-error *ngIf="componentFormControl.hasError('pattern') && !componentFormControl.hasError('required')">
                    Please enter a valid component name
                </mat-error>
                <mat-error *ngIf="componentFormControl.hasError('minlength') && !componentFormControl.hasError('required')">
                    Please enter at least 3 characters
                </mat-error>
                <mat-error *ngIf="componentFormControl.hasError('required')">
                    Component Name is <strong>required</strong>
                </mat-error>
                </mat-form-field>
                <button type="button" mat-raised-button color="primary">Add Components</button>
            </form>
            </mat-card-actions>
            ...
</ngx-datatable-row-detail>

При нажатии кнопки расширенной строки мы запускаем функцию расширенной строки 

toggleExpandRow(row) {
    this.servicesTable.rowDetail.toggleExpandRow(row);
    // Create component form
    console.log(this.services);

    this.addComponentForm[row.serviceId] = this.fb.group({
      component: this.componentFormControl
    });

** component.ts **

export class ServicesComponent implements OnInit {
  @ViewChild('servicesTable') servicesTable: any;
  addServiceForm: FormGroup;
  addComponentForm: FormGroup[] = [];

При попытке присоединить formGroup к componentForm, который является массивом FormGroup, инициализированным как пустой массив, я получаю ошибку 

ERROR TypeError: this.form._updateTreeValidity is not a function
...