Issue
I have getter in the component
here is it
public get canSave(): boolean {
const isValid = this.rows.every(r => r.phoneControl.valid);
if (!isValid) {
return false;
}
const changes = this.managePhonesPopupService.getChanges(this.rows, this.params);
return changes.phones.changed || changes.emergencyPhone.changed;
}
Then in the method onSubmitClick I need to update value of it
Here is how I try to do this
public onSubmitClick(): void {
const changes = this.managePhonesPopupService.getChanges(this.rows, this.params);
this.canSave = false;
this.params
.onSubmit(changes)
.pipe(take(1))
.subscribe(() => {
this.close(true).then();
});
}
But I get an error
Cannot assign to 'canSave' because it is a read-only property.
How can I update the value of canSave
in onSubmitClick
method?
Here is complete code of a component
export class ManagePhonesPopup extends DialogBaseComponent<Params, boolean> implements OnInit {
public override params!: Params;
public rows: IPhoneRow[] = [];
public get canSave(): boolean {
const isValid = this.rows.every(r => r.phoneControl.valid);
if (!isValid) {
return false;
}
const changes = this.managePhonesPopupService.getChanges(this.rows, this.params);
return changes.phones.changed || changes.emergencyPhone.changed;
}
constructor(
dialog: DialogRef,
confirmDialog: ConfirmDialogService,
private readonly managePhonesPopupService: ManagePhonesPopupService,
) {
super(dialog, confirmDialog);
}
public ngOnInit(): void {
this.initRows(this.params.phones, this.params.emergencyPhone);
}
public onAddClick(): void {
const newRow = this.managePhonesPopupService.createRowControls('', false);
this.rows.push(newRow);
}
public onDeleteClick(row: IPhoneRow): void {
this.rows = this.rows.filter(r => r != row);
}
public onCloseClick(): void {
this.close().then();
}
public onSubmitClick(): void {
const changes = this.managePhonesPopupService.getChanges(this.rows, this.params);
this.canSave = false;
this.params
.onSubmit(changes)
.pipe(take(1))
.subscribe(() => {
this.close(true).then();
});
}
private initRows(phones: IEmployeeCellphone[], emergencyPhone?: string): void {
const rows: IPhoneRow[] = phones.map(p => this.managePhonesPopupService.cellphoneToRowControls(p));
if (!!emergencyPhone) {
rows.push(this.managePhonesPopupService.emergencyPhoneToRowControls(emergencyPhone));
}
this.rows = rows;
}
Solution
As I understand it, you are looking for a way to force the value returned by canSave
.
To do so, you can add two additional private fields to your class:
private _forcingCanSave = false; // are we in a "forcing mode"?
private _forcedCanSaveValue = false; // forced value to return
Then, modify your existing logic like this:
public get canSave(): boolean {
if (this._forcingCanSave) return this._forcedCanSaveValue; // if in a "forcing mode", return the forced value; else continue with the existing logic
const isValid = this.rows.every(r => r.phoneControl.valid);
if (!isValid) {
return false;
}
const changes = this.managePhonesPopupService.getChanges(this.rows, this.params);
return changes.phones.changed || changes.emergencyPhone.changed;
}
And in order to enable the "forcing mode", you can create a new method:
private forceCanSave(state: boolean) {
this._forcingCanSave = true;
this._forcedCanSaveValue = state;
}
This will enable the value override in canSave
. You can then use it like this:
public onSubmitClick(): void {
const changes = this.managePhonesPopupService.getChanges(this.rows, this.params);
this.forceCanSave(false); // force canSave to return false
this.params
.onSubmit(changes)
.pipe(take(1))
.subscribe(() => {
this.close(true).then();
});
}
Additionally, you can create a method to disable the "forcing mode", for example stopForcingCanSave()
which will set this._forcingCanSave = false;
. This will come in handy when you will want to stop forcing the value.
Answered By - Sebastian Kaczmarek
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.