forms - formcontrol - formgroup angular 5 example

Angular ¿Cómo agregar Validator a FormControl después de crear el control?

Question

Tenemos un componente que tiene una forma dinámicamente construida. El código para agregar un control con validadores podría verse así

var c = new FormControl('''', Validators.required);

Pero digamos que quiero agregar 2nd Validator más tarde . ¿Cómo podemos lograr esto? No podemos encontrar ninguna documentación sobre esto en línea. Encontré aunque en los controles de formulario hay setValidators

this.form.controls["firstName"].setValidators 

pero no está claro cómo agregar un validador nuevo o personalizado.

Gracias un montón.

Answer 1

Para agregar a lo que @Delosdos ha publicado.

Establezca un validador para un control en FormGroup : this.myForm.controls[''controlName''].setValidators([Validators.required])

Elimine el validador del control en FormGroup: this.myForm.controls[''controlName''].clearValidators()

Actualice FormGroup una vez que haya ejecutado cualquiera de las líneas anteriores. this.myForm.controls[''controlName''].updateValueAndValidity()

Esta es una manera asombrosa de configurar mediante programación la validación de su formulario.

Answer 2

Si está utilizando reactiveFormModule y tiene formGroup definido de esta manera:

public exampleForm = new FormGroup({
        name: new FormControl(''Test name'', [Validators.required, Validators.minLength(3)]),
        email: new FormControl(''[email protected]'', [Validators.required, Validators.maxLength(50)]),
        age: new FormControl(45, [Validators.min(18), Validators.max(65)])
});

de lo que puede agregar un nuevo validador ( y mantener los antiguos ) a FormControl con este enfoque:

this.exampleForm.get(''age'').setValidators([
        Validators.pattern(''^[0-9]*$''),
        this.exampleForm.get(''age'').validator
]);
this.exampleForm.get(''email'').setValidators([
        Validators.email,
        this.exampleForm.get(''email'').validator
]);

FormControl.validator devuelve un validador de composición que contiene todos los validadores definidos previamente.

Answer 3

Simplemente pasa el FormControl una matriz de validadores.

Este es un ejemplo que muestra cómo puede agregar validadores a un FormControl existente:

this.form.controls["firstName"].setValidators([Validators.minLength(1), Validators.maxLength(30)]);

Tenga en cuenta que esto restablecerá cualquier validador existente que haya agregado al crear el Control de control.