es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

El validador de formularios Angular12 está validando en la carga de la página.

25 May, 2023 Programación

Ya busqué en toda la comunidad y no encontré ninguna solución.

Tengo un formulario en angular dentro de un stepper.
El problema es que cuando se carga la página, el formulario se valida al inicio, haciendo que la entrada se torne en rojo, como se muestra en la imagen.

Imagen del formulario

¿Cómo puedo evitar esto?
Ya intenté con markAsPristine y otros, pero nada funciona…

Aquí está la parte .TS cuando se inicializa el formulario (se llama desde ngOnInit):

this.professionalDataForm = this.formBuilder.group({
professionalRUT: this.formBuilder.control({value: ”, disabled: false},[Validators.required]),
professionalName: this.formBuilder.control({value: ”, disabled: false}),
address: this.formBuilder.control({value: ”, disabled: false}),
commune: this.formBuilder.control({value: ”, disabled: false}),
email: this.formBuilder.control({value: ”, disabled: false})
});

Y aquí está el .html:


Rut del profesional


adsf

gracias…

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que ya has intentado varias soluciones, pero no has logrado obtener el resultado deseado. Una posible solución es usar el método setValue() en la instancia de FormControl para establecer el valor inicial del control de formulario. Esto evitará que el formulario se marque como no válido al cargar la página.

    Por ejemplo, podrías actualizar el método ngOnInit() para establecer el valor inicial del control de formulario professionalRUT:

    ngOnInit() {
  this.professionalDataForm = this.formBuilder.group({
    professionalRUT: this.formBuilder.control({value: '', disabled: false},[Validators.required]),
    professionalName: this.formBuilder.control({value: '', disabled: false}),
    address: this.formBuilder.control({value: '', disabled: false}),
    commune: this.formBuilder.control({value: '', disabled: false}),
    email: this.formBuilder.control({value: '', disabled: false})
  });
  this.professionalDataForm.get('professionalRUT').setValue('');
}

    Esto debería evitar que el formulario se marque como no válido al cargar la página.

Comments are closed.