Как вложить атрибуты угловой формы в таблицу? - PullRequest
Новая
       13

Как вложить атрибуты угловой формы в таблицу?

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

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

Мой конструктор форм выглядит так: 

let parentsModel: any[] = [
    {
        parentName: 'A',
        children: [
            {
                childName: 'AA',
                value: 1
            },
            {
                childName: 'AB',
                value: 2
            }
        ]
    },
    {
        parentName: 'B',
        children: [
            {
                childName: 'BA',
                value: 3
            }
        ]
    }
]

this.form = this.formBuilder.group({
    parents: this.formBuilder.array(
        parentsModel.map(parent => this.formBuilder.group({
            parentName: [parent.ParentName],
            children: parent.children.map(child => this.formBuilder.group({
                childName: [child.childName],
                value: [child.value, [Validators.required]],
            }))
        }))
    )
});

Проблема в том, что я не уверен, как бы я отобразил это в таблице с элементами управления формой, поскольку "нормальным" способом было бы вложить элементы div, такие как: 

<form [formGroup]="form">
    <div formArrayName="parents">
        <div *ngFor="let parent of parentsModel; let pIndex=index">
            <div [formGroupName]="pIndex">
                <div formArrayName="children">
                    <div *ngFor="let children of parent.children; let cIndex=index">
                        <div [formGroupName]="cIndex">
                            <!--form controls here-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

Моя таблица в настоящее время выглядит так (без ссылки на форму), поэтому выше нет способа вложить элементы таким образом, поскольку вы не можете вложить или любой другой элемент внутри элемента. 

<table class="table table-sm">
    <thead class="thead-light">
        <tr>
            <th>Name</th>
            <th>Value</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Summary</th>
            <td>0</td>
        </tr>
        <ng-template ngFor let-parent [ngForOf]="parentsModel">
            <tr>
                <th scope="rowgroup" colspan="2">{{parent.parentName}}</th>
            </tr>
            <ng-template ngFor let-child [ngForOf]="parent.children">
                <tr>
                    <td>{{child.childName}}</td>
                    <td>{{child.value}}</td>
                </tr>
            </ng-template>
        </ng-template>
    </tbody>
</table>

Я задавался вопросом об использовании ng-template, однако, кажется, что он применим только для структурных директив, есть ли другой способ сделать это?

...