Angular: ngSubmit 未发送表单

Question

一切正常，但是当我单击提交按钮 (ngSubmit) 时，它不起作用。 FormsModule + ReactiveFormsModule 已经导入，提交按钮在表单内。你有什么想法吗？

这是html，ng-template #editMode 将被调用

<table>
    <tr class="tr_header">
        <th>Name</th>
        <th>Weight in [kg]</th>
        <th>Reps</th>
        <th>Pause in [s]</th>
        <th>Options</th>
    </tr>
    <tr *ngFor="let data of readData">
        <div *ngIf="isEdited == data.MPID;then editMode else showMode"></div>
        <form [formGroup]="musclepartForm" (ngSubmit)="musclepartUpdateSubmit()">

            <ng-template #editMode>
                <td>
                    <input class="edit_td" formControlName="musclepart" type="text" placeholder="{{data.name}}">
                </td>
                <td>
                    <input class="edit_td" formControlName="weight" type="text" placeholder="{{data.weight}}">
                </td>
                <td>
                    <input class="edit_td" formControlName="reps" type="text" placeholder="{{data.reps}}">
                </td>
                <td>
                    <input class="edit_td" formControlName="pause" type="text" placeholder="{{data.pause}}">
                </td>
                <td class="td_options">
                    <div>
                        <button type="submit" mat-icon-button color="primary" aria-label="Accept">
                            <mat-icon>check</mat-icon>
                        </button>
                        <button (click)="isEdited=false" mat-icon-button color="warn" aria-label="Cancel">
                            <mat-icon>cancel</mat-icon>
                        </button>
                    </div>
                </td>
            </ng-template>
        </form>

        <ng-template #showMode>
            <td class="td_name" (click)="gotoExercize(data.MPID, data.name)">{{data.name}}</td>
            <td>{{data.weight}}</td>
            <td>{{data.reps}}</td>
            <td>{{data.pause}}</td>
            <td class="td_options">
                <div>
                    <button (click)="editMusclepart(data.MPID)" mat-icon-button color="primary" aria-label="Edit muscle grouü">
                        <mat-icon>edit</mat-icon>
                    </button>  
                    <button (click)="deleteMusclepart(data.MPID, data.name)" mat-icon-button color="warn" aria-label="Add muscle part">
                        <mat-icon >delete</mat-icon>
                    </button>
                </div>
            </td>
        </ng-template>

    </tr>
</table>

Answer 1

您的表格似乎存在概念上的误解。 Reactive forms use a model-driven approach。这意味着应该有一个所有显示数据的底层模型是 editable。由于您 table 中的所有行都是 editable，您的表单应该代表这一点。本质上，您的整个 table 应该是一个大表单，编辑和提交按钮应该基本上切换表单行的可见性，同时将数据保存到您的表单中。您可以使用 readData 创建一个表单来处理 table.

中的所有交互

我创建了 this stack blitz 来帮助展示它的外观。代码并不完美，但希望您可以根据自己的需要进行调整。

Angular: ngSubmit 未发送表单

Angular: ngSubmit not sending form

angular

formgroups

ng-submit