[英]How to connect form with outside button and extract data without refreshing page
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.该按钮位于 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
我需要在不刷新所有页面的情况下执行此操作。按钮编辑在表单之外
You could create on the type, that the rows have, a boolean property - isEdited.您可以在行具有的类型上创建 boolean 属性 - isEdited。
makeEditable(title) would find the correct row and toggle its isEdited value. makeEditable(title) 将找到正确的行并切换其 isEdited 值。 It would also set:
它还将设置:
checkOutForm.setValue({title: title});
(if isEdited was set to true). (如果 isEdited 设置为 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:
<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.这仅适用于一次只编辑一行的情况。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.