1

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>

2 respuestas 2

1

Trabajando con Angular no necesitas casi nunca trabajar con el DOM, lo ideal es hacer algo como:

<input class="checkbox-style" type="checkbox" id="require_changes"
        checked="{changesAreRequired}"/>

Y en tu componente podrías tener algo como

class MyComponent {

  changesAreRequired = false;

// ... código del componente


  addComment(parentCommentId: number) {
    // código del método

    this.changesAreRequired = true;
    // resto del código
  }
}
2
  • y allí como valido que esté seleccionado para marcar o enviar ese valor como true a mi propiedad? si cuando presiono el botón ya le asigna un true? y siempre requiero validar ese checkbox el 25 nov. 2022 a las 14:39
  • 1
    puedes añadir un `(click)="{changesAreRequired =! changesAreRequired}" al elemento el 25 nov. 2022 a las 14:55
0

Ya encontré la solución, en donde debo de poner como opcional cuando manipulo el DOM

codigo:

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");
   // acá el element debo de colocarlo con el signo ? para dejarlo como opcional
    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);
  }

3
  • 1
    esto es una solución para evitar el error pero me pregunto si sabes por qué sucede el error, tu elemento con id "require_changes" no existe en el DOM ya que *ngIf elimina del DOM el elemento en cuestión y por esto tienes que considerar que element pueda ser null
    – LPZadkiel
    el 25 nov. 2022 a las 15:09
  • Si, mi ngif elimina el elemento y por eso sale el error, la verdad no se como podria considerar que mi element pueda ser null, de pronto si tienes conocimiento, te agradezco el 25 nov. 2022 a las 15:19
  • *ngIf="currentUser.indicators[0]?.isTPB || currentUser.roles[0].description === allRoles.admin" en este if o el que está dentro (dataFromItem.require_changes != 1 && dataFromItem.replies_count > 0) estos if podrían eliminar del html tu elemento que buscas en esta línea de código let element = <HTMLInputElement>document.getElementById("require_changes");
    – LPZadkiel
    el 28 nov. 2022 a las 22:23

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.