Estoy realizando una funcionalidad en la que despues de haber comentarios, aparece un checkbox para un rol asignado, pero como esta validación no se cumple, este checkbox no me aparece claramente y debido a ello me salta un error de Cannot read properties of null (reading 'checked')
, como puedo solucionar este error y que mi función no me haga el tracking de ese checkbox sino hasta que en las validaciones este sea true
?
el codigo es el siguiente:
addComment(parentCommentId: number) {
console.log("ADDING COMMENT");
if (this.commentGroup.invalid) {
this.alertService.error("comment is required", false);
return;
}
let element = <HTMLInputElement>document.getElementById("require_changes");
let checked = element.checked;
this.showSpinner(this.spinner_comment);
console.log(this.original_field);
this.commentService
.createDataComment({
detail: this.formData.comment.value,
userId: this.currentUser.id,
evaluationId: this.dataFromItem.evaluation_id,
metaId: this.dataFromItem.field_id,
approved: true,
original_field: this.original_field,
require_changes: checked,
tpb: checked
})
.subscribe(
(res) => {
console.log("COMMENT ADDED");
this.getItemCommentData(true);
this.formData.comment.reset();
this.validateAllFieldsAssessed.emit();
if (checked && this.commentsByColSelected != null) {
this.UpdateRequireChanges(parentCommentId, checked)
}
},
(error) => {
console.log("getEvaluationsList", error);
this.hideSpinner(this.spinner_comment);
this.alertService.error(error);
}
);
// UpdateRequireChanges(this.commentsByCol.id, this.commentsByCol.require_changes);
}
<div
*ngIf="
currentUser.indicators[0]?.isTPB ||
currentUser.roles[0].description === allRoles.admin
"
>
<label
*ngIf="
dataFromItem.require_changes != 1 && dataFromItem.replies_count > 0
"
class="checkbox-label"
for="changes"
class="valor"
>
<input class="checkbox-style" type="checkbox" id="require_changes" />
Requires changes in the result reported
</label>
</div>
<footer>
<span class="wordCount"
>{{ getWordCount(formData.comment.value) }} / 1000 words</span
>
<button
type="button"
class="btn btn-agree"
(click)="addComment(commentsByColSelected?.id)"
>
ADD
</button>
</footer>