0

Estoy creando un formulario en angular. Tengo por un lado en una ruta el cuestionario con los datos de una persona y en otra que me liste todos los datos introducidos de todas las personas guardadas.
Sobre esa lista de personas necesito implementar que se pueda modificar cualquier campo, por lo que genere un nuevo cuestionario en el que pregunto qué campo quieres modificar (Tipo) y el dato a introducir (datoInsertar).
El problema viene cuando quiero validar ese dato con los validadores. Hice uno personalizado para decirle si el campo es nombre aplica tal validación, si es edad aplica tal otra. El problema es que siempre me dice que el campo tipo es undefined aunque si lo saco de dentro de la función sí que esta definido.

Pego aquí el constructor y la función para ver si alguien sabe cómo acceder a la variable para poder validar:

import { Component, OnInit, } from '@angular/core';
import { ContactoService } from '../contacto.service';
import { Usuario } from '../modelos/empleado.modelo';
import { FormGroup, FormControl, Validators,AbstractControl, ValidatorFn, Validator, NG_VALIDATORS } from '@angular/forms';

export class AgendaComponent implements OnInit {

    agenda: Array<Usuario> = []
    posicionActualizar: any;
    modificacion: boolean = false;
    formTipo: FormGroup;
    formDato: FormGroup;
    valorTipo:any = ""
    
    // validacion: any = "nombre";
    constructor(
      private contactoService: ContactoService
    ) {
      this.formTipo = new FormGroup({
        tipo: new FormControl('', [Validators.required])
        
      })
      this.formDato = new FormGroup({
       
        datoInsertar: new FormControl('', [ Validators.required,this.validatorsFactory ])
      })
    }

    validatorsFactory() {
    
    if (this.valorTipo == 'nombre') {
      return (control: AbstractControl) => {
        if(control.value >= 3) return null
        return { valido: 'el campo debe tener 3 caracteres' }
      }
    }
    
    return () => null
  }

1 respuesta 1

0

El error se produce porque la función valido() tiene referencia a la propiedad valorTipo la cual existe en el objeto AgendaComponent. Cuando valido() se pasa al arreglo de validadores cambia su contexto y this ya no hace referencia a AgendaComponent por lo tanto valorTipo no existe.

Eso se puede solucionar usando una función que sirva de fábrica de validadores:

validatorsFactory() {
    
    if (this.valorTipo == 'nombre') {
      return (control: AbstractControl) => {
        if(control.value >= 3) return null
        return { valido: 'el campo debe tener 3 caracteres' }
      }
    }
    
    return () => null
  }

Observa como la función que sirve de fábrica sí tiene acceso a valorTipo, eso es porque esa función se ejecutará en el contexto de AgendaComponent y devolverá un validador independiente del contexto.

Luego esa función se usa así:

datoInsertar: new FormControl('', [Validators.required, this.validatorsFactory()])

Angular custom validators

7
  • Antetodo muchas gracias importe import { FormGroup, FormControl, Validators,AbstractControl, ValidatorFn, Validator, NG_VALIDATORS } from '@angular/forms'; para definir control: AbstractControl pero sigue diciendo core.js:6210 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'valorTipo' of undefined TypeError: Cannot read property 'valorTipo' of undefined que puedo hacer? el 14 may. 2021 a las 9:46
  • Agrega el código actualizado a la pregunta.
    – Lobos
    el 14 may. 2021 a las 12:50
  • lo modifique arriba el 17 may. 2021 a las 7:13
  • Es que no estás usando la función nueva validatorsFactory revisa el ejemplo de cómo se usa.
    – Lobos
    el 17 may. 2021 a las 13:04
  • aquí estaba mal puesto lo de this.validatorsFactory pero en el código no y sigue dando error , te referías a eso o sigo mirando el 17 may. 2021 a las 14:39

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.