Topic: How to implement two-way binding with [conetendeditable]
Spencer LeBlanc asked 5 years ago
Expected behavior So I'm working on a table that is meant to detect and record changes made by a user and log them but not display any changes until a higher authority commits those changes. Part of the app involves passing along said changes with JSON.parse and JSON.stringify that's nut fully fleshed otu et. The problem comes when I try to read in what in the line of this.jerb in typescript which is databound{{}} but only reads the value from the original service that's providing the fields rather than what is being typed in the field.
So I ask is there anyway to update the values in an array with what's typed in content editable span field?
HTML line in question:
<ng-container *ngFor="let j of jerb | filter : 'title' : searchString; let i = index">
...
...
...
<span id="textfield" [attr.contenteditable]="Editmode" (keypress)="onPreventNum($event, i)" >{{j.title}}</span>
HTML: associated buttons that enable editing
<td>
<button *ngIf="!Editmode" type="button" mdbBtn color="info" (click)="Editlist()" mdbWavesEffect>Edit</button>
<button *ngIf="Editmode" type="button" mdbBtn color="success" (click)="EditCommit(i, j.id, j.title, j.date, j.location, j.status, j.openings, j.duration)" mdbWavesEffect>Commit</button>
<button *ngIf="Editmode" type="button" mdbBtn color="danger" (click)="EditClose()" mdbWavesEffect>Cancel</button>
</td>
Associated typescript:
Editlist(){ //Enables Editting
this.Editmode=true;
}
EditClose(){ //closes editting mode without saving changes
this.Editmode=false;
this.jerb=JSON.parse(JSON.stringify(this.jerbpure));
}
EditCommit(i, id: any, title: string, date: any, location: string, status: string, openings: number, duration: string){ // closes editting mode while saving changes for admin approval and reverting to orgininal for time being
this.Editmode=false;
console.log(JSON.parse(JSON.stringify(this.jerb[i])));
this.jerbchanges[this.counter]=JSON.parse(JSON.stringify(this.jerb[i]));//instead of erasing changes edits, commits saves the changes and passes to hidden table for admin approval
this.jerb=JSON.parse(JSON.stringify(this.jerbpure));
this.counter+=1;
this.changeChecker=[]
}
onPreventNum(event: any, i){
if (
(event.charCode == 32 || //space
event.charCode == 39 || //apostrophe
event.charCode == 45 || //hyphen
event.charCode == 46 || //period
event.charCode >= 65 && event.charCode <= 90 ||//Capitals
event.charCode >= 97 && event.charCode <= 122 //lowercase
)
) {
console.log("A letter or special char was entered");
console.log(event.charCode);
console.log(this.jerb[i].title)
return; // let it happen, don't do anything
}
Arkadiusz Idzikowski staff answered 5 years ago
Here is an example on how to update edited value on blur event. I used simple string and blur event but you can easily adjust this example to your data structure and app logic.
HTML:
<span id="textfield" contenteditable="true" (blur)="onBlur($event)">{{ editableValue }}</span>
TS:
editableValue = 'Editable value';
onBlur(event: any) {
this.editableValue = event.target.outerText;
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 8.3.1
- Device: PC
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No