Skip to main content
Revertido a la revisión 1
Origen Enlace
user128299
user128299

SOLUCIONADO (Mi respuesta abajo)

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.

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} );
   }

 }
}

SOLUCIONADO (Mi respuesta abajo)

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.

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} );
   }

 }
}

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.

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} );
   }

 }
}
se añadieron 35 caracteres en el cuerpo
Origen Enlace

SOLUCIONADO (Mi respuesta abajo)

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.

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} );
   }

 }
}

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.

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} );
   }

 }
}

SOLUCIONADO (Mi respuesta abajo)

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.

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} );
   }

 }
}
Origen Enlace

Angular 11 Validador Personalizado de ISBN Reactive Forms

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>