2

Tengo una clase MyValidators con el siguiente método:

import { AbstractControl } from '@angular/forms';
export class MyValidators{

   static cleanUnnecessaryWhiteSpaces(control: AbstractControl){
        const value = control.value;
        const cleanString = value.replace(/\s{2,}/g, ' ').trim();
        return cleanString;
    }

Despues implemento este validator personalizado cleanUnnecessaryWhiteSpaces en mi formulario

import { MyValidators } from '../../../utils/myValidators';

export class BookFormComponent implements OnInit {

  cad: string;
  form: FormGroup;
  book = {} as Book; // declaro el objeto Book vacio
  // obteniendo año actual
  today = new Date();
  year = this.today.getFullYear();

  constructor(
    public bookService: BookService,
    private toastr: ToastrService,
    private formBuilder: FormBuilder
    ) {
      // function buildForm
      this.buildForm();
    }

  ngOnInit(): void {
  }

   buildForm() {
    this.form = this.formBuilder.group({
      name: ['', [Validators.required, Validators.maxLength(50), MyValidators.cleanUnnecessaryWhiteSpaces]],
      year: ['', [Validators.required, Validators.max(this.year)]],
      author: ['', [Validators.required]],
      category: ['', [Validators.required]],
      editorial: ['', [Validators.required]],
      description: ['', [Validators.required, Validators.maxLength(300)]],
      quantity: ['', [Validators.required]],
      price: [0, [Validators.required]],
      image: [''],
      state: [true]
    });
  }
}

pero por consola angular muestra este error:

core.js:4197 ERROR TypeError: Cannot read property 'replace' of undefined at cleanUnnecessaryWhiteSpaces (myValidators.ts:13) at forms.js:1169 at Array.map () at executeValidators (forms.js:1169) at forms.js:1123 at forms.js:1169 at Array.map () at executeValidators (forms.js:1169) at FormControl.validator (forms.js:112

1 respuesta 1

1

Lo que estas recibiendo no es un formControl, si no el valor del control:

   // De esta manera no tendras error
   static cleanUnnecessaryWhiteSpaces(valor: string){
        const value = valor
        // Pero esta parte no te va a funcionar
        const cleanString = value.replace(/\s{2,}/g, ' ').trim();
        return cleanString;
    }

Las validaciones no cambian el dato que recibes. Angular espera un objeto cuando la validación es incorrecta. Este objeto debe contener los datos que quieras mostrar al no pasar las reglas definidas. Si la validación es correcta se debe pasar un null. Tu lógica actual siempre dará error al contener texto, y sera correcto al no tener nada escrito.

Los datos los puedes depurar cuando mandes tu formulario. Hacerlo de la manera que planteas te va a acarrear una dificultad en tu código que personalmente, no te recomiendo abordar.

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.