In my code, I have a confirm dialog component which I use in different parts of my app. It also has an input description field that is mandatory for some components. For my request-detail component, I don't want the input description field to be mandatory. But when I set this.confirmDialogRef.componentInstance.hasInput = true; to false, the input field disappears, and I don't want that. I can't make big changes to the confirm dialog component, since I still need the input description field to be mandatory for other components in my app. What should I do to achieve what I want?
Request Detail TS:
approveRequest() {
this.confirmDialogRef = this._dialog.open(FuseConfirmDialogComponent, {
disableClose: false,
});
this.confirmDialogRef.componentInstance.confirmMessage =
"Do you want to approve";
this.confirmDialogRef.componentInstance.hasInput = true;
this.confirmDialogRef.afterClosed().subscribe((result) => {
if (result) {
this.request.ApprovementInfo.Description = result;
this._requestService
.approveRequest(this.request)
.subscribe(() => {
this._requestService.getRequestDetail(
this.request.RequestId
);
});
}
});
}
Confirm Dialog TS:
public title: string = "Confirm";
public confirmMessage: string = "";
public hasInput: boolean;
public hasInputEn: boolean;
public inputDescription: string = "";
public inputDescriptionEn: string = "";
/**
* Constructor
*
* @param {MatDialogRef<FuseConfirmDialogComponent>} dialogRef
*/
constructor(
public dialogRef: MatDialogRef<FuseConfirmDialogComponent>,
private _messages: Messages
) {}
confirm() {
if (this.hasInput) {
if (
this.inputDescription == undefined ||
this.inputDescription.length == 0
) {
this._messages.Show("Please enter a description!", "WARNING", 4);
return;
}
if (
this.hasInputEn &&
(this.inputDescriptionEn == undefined ||
this.inputDescriptionEn.length == 0)
) {
this._messages.Show(
"Please enter a description in english!",
"WARNING",
4
);
return;
}
this.dialogRef.close(this.inputDescription);
} else {
this.dialogRef.close(this.inputDescription || true);
}
}
}