How to connect form with outside button and extract data without refreshing page

Question

I have such issue I need to extract data from:

<ng-container matColumnDef="title">
        <th mat-header-cell *matHeaderCellDef> Title </th>
        <td mat-cell *matCellDef="let row"><div id="{{'make_editable' + row.title}}">{{row.title}}</div></td>
    </ng-container>
...

<ng-container matColumnDef="buttonEdit">
            <th mat-header-cell *matHeaderCellDef> buttonEdit </th>
            <td mat-cell *matCellDef="let row"><button (click)="makeEditable(row.title)" class="mat-raised-button" form="myform">Edit</button></td>
    /ng-container>


  makeEditable(title){  
    console.log(this.checkOutForm.value.title);
    let id:string="make_editable"+title;
    if(this.toggleEdit()){   
      document.getElementById(id).innerHTML = `<form id="myform" (ng-submit)="extractFormValues()" [formGroup]="checkOutForm"><input type="text" value="${title}"></form>`;

    }
    else {
      document.getElementById(id).innerHTML = title;
      console.log(this.checkOutForm.controls.title.value);
    }

The button is outside the function. If edit button is clicked then input wraps data and make it active. I need to do it without refreshing all page.The button Edit is outside of the form

Answer 1

You could create on the type, that the rows have, a boolean property - isEdited.

makeEditable(title) would find the correct row and toggle its isEdited value. It would also set:

checkOutForm.setValue({title: title});

(if isEdited was set to true).

In the template you would wrap the whole block in

<form id="myform" (ng-submit)="extractFormValues()" [formGroup]="checkOutForm"</form>

and change the td for a title:

<td mat-cell *matCellDef="let row">
    <div *ngIf="!row.isEdited">{{row.title}}</div>
    <input *ngIf="row.isEdited" type="text" formControlName="title">
</td>

This only works if just one row is edited at once.