Validacion condicional en Reactive forms

En la entrada de hoy vamos a ver como realizar validación condicional en Angular2. Para ello vamos a crear un formulario reactivo (reactive form) donde solicitaremos un medio de pago (contrareembolso, transferencia y tarjeta).
En el caso de que el medio de pago sea "tarjeta", marcaremos los campos "número de tarjeta" y "fecha de caducidad" como requeridas.

Vamos al código:

Lo primero que debemos hacer es importar en el app.module.ts el módulo ReactiveFormsModule (que se encuentra dentro de @angular/forms) ya que vamos a usar los formularios reactivos.

Ahora vamos a crear el formulario:

(app.component.ts)

import { Component, OnInit } from '@angular/core';

import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent implements OnInit {

private form: FormGroup;

constructor(private fb: FormBuilder) {

this.form = this.fb.group({

'FormaPago': ['Contrareembolso', Validators.required],

'NumeroTarjeta': [null],

'FechaCaducidad': [null]

});

}

ngOnInit(): void {

this.form.controls['FormaPago'].valueChanges

.subscribe(value => {

if (value === 'Tarjeta') {

this.setValidatorRequired('NumeroTarjeta', Validators.required);

this.setValidatorRequired('FechaCaducidad', Validators.required);

} else {

this.setValidatorRequired('NumeroTarjeta', null);

this.setValidatorRequired('FechaCaducidad', null);

}

});

}

setValidatorRequired(campo, requerido) {

this.form.controls[campo].setValidators(requerido);

this.form.controls[campo].updateValueAndValidity();

}

}

En el código anterior hemos declarado nuestro formulario (form) el cual tendrá tres campos:
FormaPago, cuyo valor predeterminado es 'Contrareembolso' y es requerido.
NumeroTarjeta y FechaCaducidad, en principio no son requeridos (lo serán cuando el método de pago seleccionado sea "Tarjeta")

En el metodo ngOnInit chequeamos los cambios que ocurran en el control "FormaPago". Cuando la forma de pago seleccionada sea "Tarjeta", establecemos para ese campo el validador "Required" (Validators.required) y actualizamos el estado del mismo mediante la instrucción updateValueAndValidity

Si el método de pago es distinto de "Tarjeta" quitamos la validación requerida (o lo que es lo mismo, la establecemos a null) y al igual que en el caso anterior llamamos al método updateValueAndValidity

Respecto al html (no se ha tenido en cuenta el aspecto visual) poco que comentar.
Hay unos controles radioButton para la selección de la forma de pago, los controles para indicar el número de tarjeta y fecha de caducidad (por simplicidad no se controla ni la longitud ni formato de estos campos) y un botón de enviar que estará disponible si se indican los campos requeridos.
Aquí les dejo el html del mismo:

<form>

<div>

<h3>Forma de pago</h3>

<input type="radio" value="Contrareembolso" name="formapago"

[formControl]="form.controls['FormaPago']"> Contrareembolso

<input type="radio" value="Trasferencia" name="formapago"

[formControl]="form.controls['FormaPago']"> Trasferencia

<input type="radio" value="Tarjeta" name="formapago"

[formControl]="form.controls['FormaPago']"> Tarjeta

</div>

<div *ngIf="form.controls['FormaPago'].value==='Tarjeta'">

<h3>Datos de la tarjeta</h3>

<span>Número de tarjeta</span>

<input type="text" [formControl]="form.controls['NumeroTarjeta']">

<br>

<span>Fecha caducidad (mes/año)</span>

<input type="text" [formControl]="form.controls['FechaCaducidad']">

</div>

<div>

<button type="submit" [disabled]="!form.valid">Enviar</button>

</div>

</form>

El código fuente esta disponible en:

https://gist.github.com/jorgetrigueros/328c569da073de5655aa66b194f91fb5#file-validacioncondicional-ts