Angular: ngSubmit not sending form-CodePudding

Everything is working fine but when I click the submit button (ngSubmit) is not working. FormsModule ReactiveFormsModule are already imported and the submit button is inside the form. Do you have any ideas?

This is the html, ng-template #editMode will be called

<table>
    <tr >
        <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  formControlName="musclepart" type="text" placeholder="{{data.name}}">
                </td>
                <td>
                    <input  formControlName="weight" type="text" placeholder="{{data.weight}}">
                </td>
                <td>
                    <input  formControlName="reps" type="text" placeholder="{{data.reps}}">
                </td>
                <td>
                    <input  formControlName="pause" type="text" placeholder="{{data.pause}}">
                </td>
                <td >
                    <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  (click)="gotoExercize(data.MPID, data.name)">{{data.name}}</td>
            <td>{{data.weight}}</td>
            <td>{{data.reps}}</td>
            <td>{{data.pause}}</td>
            <td >
                <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>

CodePudding user response：

There seems to be a conceptual misunderstanding in your form. Reactive forms use a model-driven approach. This means that there should be an underlying model of all the displayed data that is editable. As all the rows in your table are editable, your form should represent this. In essence, your entire table should be one big form and the edit and submit buttons should basically toggle the visibility of the form rows, while saving the data to your form. You can use your readData to create a form to handle all the interactions in your table.

I created this stack blitz to help show what that might look like. The code isn't perfect, but hopefully you can adapt it to your needs.