Angular 2
Angular2 Validaciones personalizadas

Parámetros

Ejemplos de validadores personalizados:

Angular 2 tiene dos tipos de validadores personalizados. Validadores síncronos como en el primer ejemplo que se ejecutarán directamente en el cliente y validadores asíncronos (el segundo ejemplo) que puede usar para llamar a un servicio remoto y hacer la validación por usted. En este ejemplo, el validador debe llamar al servidor para ver si un valor es único.

export class CustomValidators {

static cannotContainSpace(control: Control) {
    if (control.value.indexOf(' ') >= 0)
        return { cannotContainSpace: true };

    return null;
}

static shouldBeUnique(control: Control) {
    return new Promise((resolve, reject) => {
        // Fake a remote validator.
        setTimeout(function () {
            if (control.value == "exisitingUser")
                resolve({ shouldBeUnique: true });
            else
                resolve(null);
        }, 1000);
    });
}}

Si su valor de control es válido, simplemente devuelve el valor nulo a la persona que llama. De lo contrario, puede devolver un objeto que describe el error.

Usando validadores en el Formbuilder

   constructor(fb: FormBuilder) {
    this.form = fb.group({
        firstInput: ['', Validators.compose([Validators.required, CustomValidators.cannotContainSpace]), CustomValidators.shouldBeUnique],
        secondInput: ['', Validators.required]
    });
}

Aquí usamos el FormBuilder para crear un formulario muy básico con dos cuadros de entrada. El FromBuilder toma una matriz para tres argumentos para cada control de entrada.

1. El valor por defecto del control.
2. Los validadores que se ejecutarán en el cliente. Puede usar Validators.compose ([arrayOfValidators]) para aplicar varios validadores en su control.
3. Uno o más validadores asíncronos de manera similar al segundo argumento.

Obtener / establecer parámetros de controles de formBuilder

Hay 2 formas de configurar los parámetros de controles de formBuilder.

1. Al inicializar:

exampleForm : FormGroup;
constructor(fb: FormBuilder){
  this.exampleForm = fb.group({
      name : new FormControl({value: 'default name'}, Validators.compose([Validators.required, Validators.maxLength(15)]))
   });
}

2.Después de inicializar:

this.exampleForm.controls['name'].setValue('default name');

Obtener valor de control de formBuilder:

let name = this.exampleForm.controls['name'].value();