forms - formgroup - reactive form validation

¿Alguien sabe cómo activar Validadores de formularios en Angular2?

Question

En angular2 quiero activar Validadores para algunos controles cuando se cambia otro control. ¿Hay alguna manera de que pueda decirle al formulario que vuelva a validar? Mejor aún, ¿puedo solicitar la validación de campos específicos?

Ejemplo: Dada la casilla de verificación X y la entrada P. La entrada P tiene un validador que se comporta de manera diferente según el valor del modelo de X. Cuando X está marcada / desmarcada, necesito invocar el validador en P. El validador en P examinará el modelo para determinará el estado de X y validará P en consecuencia.

Aquí hay un código:

constructor(builder: FormBuilder) {
    this.formData = { num: '''', checkbox: false };

    this.formGp = builder.group({
        numberFld: [this.formData.num, myValidators.numericRange],
        checkboxFld: [this.formData.checkbox],
    });
}

this.formGp.controls[''checkboxFld''].valueChanges.observer({
    next: (value) => {
        // I want to be able to do something like the following line:
        this.formGp.controls[''numberFld''].validator(this.formGp.controls[''numberFld'']);
    }
});

¿Alguien tiene una solución? ¡Gracias!

Answer 1

Con la ayuda de este blog

enlace de blog

He encontrado una solución con la combinación de respuesta Nightking

Object.keys(this.orderForm.controls).forEach(field => {
       const control = this.orderForm.get(field);
       control.updateValueAndValidity();

});

this.orderForm es el grupo de formularios

Answer 2

Hay formas más elegantes de modelar este comportamiento, por ejemplo, poner su estado en un ReplaySubject y observarlo, y luego usar validadores asíncronos que observen el estado, pero el enfoque pseudo-codificado a continuación debería funcionar. Simplemente observe los cambios de valor en la casilla de verificación, actualice el modelo según corresponda y luego fuerce una nueva validación de numberFld con la calibración updateValueAndValidity.

constructor(builder: FormBuilder) {
  this.formData = { num: '''', checkbox: false };
  const numberFld = builder.control(this.formData.num, myValidators.numericRange);

  const checkbox = builder.control(this.formData.checkbox);
  checkbox.valueChanges.map(mapToBoolean).subscribe((bool) => {
    this.formData.checked = bool;
    numberFld.updateValueAndValidity(); //triggers numberFld validation
  });

  this.formGp = builder.group({
      numberFld: numberFld,
      checkboxFld: checkbox
  });
}

Answer 3

No sé si todavía estás buscando una respuesta, así que aquí están mis sugerencias:

Echa un vistazo a esto: Angular 2 - AbstractControl

Creo que lo que puedes hacer es lo siguiente:

this.formGp.controls[''checkboxFld''].valueChanges.observer({
    next: (value) => {
       this.formGp.controls[''numberFld''].updateValueAndValidity();
    }
});

Esto debería activar y ejecutar los validadores. Además, el estado también se actualiza. Ahora debería poder consultar el valor de la casilla de verificación dentro de su lógica de validación.

¡Espero que esto ayude!

EDITAR: Enlace actualizado y ejemplo. El código cambió mientras escribía mi respuesta.

EDIT_2: alpha.48 cambia el EventEmitter.observer a EventEmitter.subscribe!

EDIT_3: Enlace modificado a la implementación real, enlace agregado a los documentos

Validaton-Guide

Documentación de FormControl

Answer 4

con mi ControlGroup hago esto porque tengo errores de comprobación de divs si se toca

for (var i in this.form.controls) {
  this.form.controls[i].markAsTouched();
}

(this.form es mi ControlGroup)

Answer 5

static minMaxRange(min: number, max: number): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null => {
        if (Validators.min(min)(control)) { // if min not valid
            return Validators.min(min)(control);
        } else {
            return Validators.max(max)(control);
        }
    };
}