I am facing an issue with my items section. When I click on an item, a modal window opens allowing me to edit the text inside a textarea. However, if I make changes to the text and then cancel or close the modal, upon reopening it, the previously modified text remains. My objective is to reset the text to its original state before any modifications were made when closing the modal.
Could you provide some guidance or suggest a solution for this problem?
<form [formGroup]="editForm" (ngSubmit)="editItem()">
<textarea rows="3" formControlName="text"></textarea>
<button type="submit">Save</button>
<button type="button" (click)="closeModal()">Close</button>
</form>
export class EditItemComponent implements OnInit, OnChanges {
@Input() item: Item;
editForm: FormGroup;
ngOnInit(): void {
this.editForm = new FormGroup({
text: new FormControl('', [Validators.required, Validators.minLength(3)]),
});
}
ngOnChanges(): void {
this.editForm.controls.text.setValue(this.item.text);
}
editItem():void {
//logic for editing item
}
closeModal(): void {
//logic for closing modal
//I am aware that I can simply revert the editForm text back
//to its original state, but I am seeking a more generic solution
//that can handle various scenarios such as clicking away from the modal
//or pressing the escape key to close it.
}
}