0

Estoy haciendo una validación personalizada para un número ISBN, ya tengo la función que verifica el número y funciona perfectamente dándome la respuesta por consola, pero necesito hacer el validador personalizado para obtener el error en la vista con el form control y en este paso, este error se muestra en la consola cuando escribo un número ISBN, es como si verificara los errores pero no sabe cuándo es correcto y debería tomar la respuesta null como un número ISBN correcto, al menos eso es lo que yo vi en algunos ejemplos.

core.js:6210 ERROR TypeError: Cannot read properties of null (reading 'CheckDigit')
at LibrosComponent_Template (libros.component.html:22)
at executeTemplate (core.js:9600)
at refreshView (core.js:9466)
at refreshComponent (core.js:10637)
at refreshChildComponents (core.js:9263)
at refreshView (core.js:9516)
at refreshEmbeddedViews (core.js:10591)
at refreshView (core.js:9490)
at refreshComponent (core.js:10637)
at refreshChildComponents (core.js:9263)

Este es mi typescript

export class LibrosComponent implements OnInit {

 //ISBN Validator
 isbnValue: string = ""
 
 firstFormGroup: FormGroup;
 secondFormGroup: FormGroup;

  constructor(
   private _formBuilder: FormBuilder,
 ) {}

 ngOnInit() {
   this.firstFormGroup = this._formBuilder.group({
     tituloControl: ['', Validators.required],
     isbnControl: ['', Validators.required],
   },
   { validator: this.isbnValidate });    
 }
 
 isbnValidate(g: FormGroup) {
     var isbnValue = g.get('isbnControl').value
     var subject = isbnValue;

     // Checks for ISBN-10 or ISBN-13 format
   var regex = /^(?:ISBN(?:-1[03])?:? )?(?=[0-9X]{10}$|(?=(?:[0-9]+[- ]){3})[- 0-9X]{13}$|97[89][0-9]{10}$|(?=(?:[0-9]+[- ]){4})[- 0-9]{17}$)(?:97[89][- ]?)?[0-9]{1,5}[- ]?[0-9]+[- ]?[0-9]+[- ]?[0-9X]$/;

   if (regex.test(subject)) {
       // Remove non ISBN digits, then split into an array
       var chars = subject.replace(/[- ]|^ISBN(?:-1[03])?:?/g, "").split("");
       // Remove the final ISBN digit from `chars`, and assign it to `last`
       var last = chars.pop();
       var sum = 0;
       var check, i;

       if (chars.length == 9) {
           // Compute the ISBN-10 check digit
           chars.reverse();
           for (i = 0; i < chars.length; i++) {
               sum += (i + 2) * parseInt(chars[i], 10);
           }
           check = 11 - (sum % 11);
           if (check == 10) {
               check = "X";
           } else if (check == 11) {
               check = "0";
           }
       } else {
           // Compute the ISBN-13 check digit
           for (i = 0; i < chars.length; i++) {
               sum += (i % 2 * 2 + 1) * parseInt(chars[i], 10);
           }
           check = 10 - (sum % 10);
           if (check == 10) {
               check = "0";
           }
       }

       if (check != last) {
         return null;
           
       } else {
         return  g.get('isbnControl').setErrors( {CheckDigit: true} )
           
       }
     } else {
       return g.get('isbnControl').setErrors( {Invalid: true} );
   }

 }
}

En mi HTML tengo algunas inputs que se incluyen en el formulario:

<form class="form" [formGroup]="firstFormGroup">  
          <div class="container-1">
            <mat-form-field class="width">
              <mat-label>Título</mat-label>
              <input matInput formControlName="tituloControl" required>
            </mat-form-field>

            <mat-form-field class="width">
                <mat-label>ISBN</mat-label>
                <input matInput formControlName="isbnControl" required>
                <mat-error *ngIf="firstFormGroup.controls['isbnControl'].pristine || firstFormGroup.controls.isbnControl.errors['CheckDigit']">Invalid ISBN check digit</mat-error>
                <mat-error *ngIf="firstFormGroup.controls['isbnControl'].pristine || firstFormGroup.controls.isbnControl.errors['Invalid']">Invalid ISBN</mat-error>
            </mat-form-field>
</form>
2
  • en el error te dice que no puede leer checkDigit porque es null, me huele a que if (check != last) tiene algo que ver, aunque no estoy seguro, desconozco angular Commented el 23 dic. 2021 a las 16:08
  • el error te lo esta dando en el template al leer errors['CheckDigit'], porque si no hay errores, errors es null. Puedes usar el optional chaining de la siguiente manera para evitarlo firstFormGroup.controls.isbnControl.errors?.['CheckDigit']. Seguramente tendrás que hacer lo mismo en la linea siguiente.
    – akotech
    Commented el 23 dic. 2021 a las 18:54

2 respuestas 2

0

Me parece que el problema puede estar en la parte donde regresas los mapas de errores, la función .setErrors() regresa un tipo void (https://angular.io/api/forms/FormGroup) y cuando haces { validator: this.isbnValidate } la función que pasas como validador debe regresar null o un mapa de error, es decir, {Invalid: true} o {CheckDigit: true}.

Sugiero que cambies los returns return g.get('isbnControl').setErrors( {CheckDigit: true} ) y solo regresar return {CheckDigit: true}

Éxito!

UPDATE

Revise de nuevo y me percate de algunas cosas:

Ya no se ven los errores por que ya no se ejecuta el método setErrors, y creo que el campo no reconoce cuando es válido por que no se actualiza el estado valid al setear los errores, creo que el validador debería estar a nivel del formControl, esto es porque cada vez que haces un cambio en algún campo del formGroup, éste campo ejecuta sus propias validaciones que afectan su estado valid y además le avisa al formulario que algo cambió, a su vez el formGroup ejecuta los validadores asociados él y actualiza el estado valid del form. Esto hará que el validador se ejecute aunque no cambie el campo en cuestión. Para evitar este comportamiento te sugiero cambiar la definición del form

 tituloControl: ['', [Validators.required]],
 isbnControl: ['', [Validators.required,this.isbnValidate]]

Y ajustar el validador en estos puntos:

isbnValidate(control: FormControl) {
   var isbnValue = control.value;
     .
     . 
     .
   if (regex.test(subject)) { 
      ....
      ....
      if (check != last) {
         return null;
      } else {
        return { CheckDigit: true };
      }
   }else{
     return { Invalid: true };
   }
}

De esta forma debería de agregar el mapa de error al formControl y actualizar el estado valid. Espero que funcione =) .

2
  • Hice la prueba con lo que me dices pero continúa el mismo error y no me muestra en este caso nada por el mat-error, con mi versión si me muestra los errores por mat-error pero no reconoce cdo es válido el isbn, continúa dando en la vista un error de invalid isbn Commented el 23 dic. 2021 a las 17:09
  • además cómo sugiere @akotech, puedes usar optional chaining para asegurar que si firstFormGroup.controls.isbnControl.errors es null no lance una excepción (stackoverflow.com/a/15260828/17566564).
    – DevTest
    Commented el 23 dic. 2021 a las 22:27
0

Ya encontré la solución al error, remplazando el .errors[' '] por hasError(' '), el errors es para leer la propiedad del objeto que contiene el error de la validación. Pero primero debo evaluar con el método hasError() si esa propiedad existe para acceder a ella.

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.