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 使用模型驅動的方法。 這意味着所有顯示的數據都應該有一個底層 model 是可編輯的。 由於表格中的所有行都是可編輯的，因此您的表單應該代表這一點。 本質上，你的整個表格應該是一個大表格，編輯和提交按鈕應該基本上切換表格行的可見性，同時將數據保存到你的表格中。 您可以使用readData創建一個表單來處理表中的所有交互。

我創建了這個堆棧閃電戰來幫助展示它可能是什么樣子。 該代碼並不完美，但希望您可以根據需要對其進行調整。