Recabamos en distintos espacios y así de esta manera darte la respuesta para tu problema, si tienes dificultades déjanos tu comentario y contestamos porque estamos para servirte.
Solución:
En mi aplicación, tengo un requisito similar. Si el usuario solicita ser notificado por mensaje de texto, se requiere el teléfono. De lo contrario, el número de teléfono es opcional.
Escribí este método:
setNotification(notifyVia: string): void
const phoneControl = this.customerForm.get('phone');
if (notifyVia === 'text')
phoneControl.setValidators(Validators.required);
else
phoneControl.clearValidators();
phoneControl.updateValueAndValidity();
Se llama desde este código que está en ngOnInit:
this.customerForm.get('notification').valueChanges
.subscribe(value => this.setNotification(value));
Si el usuario cambia el campo de notificación (que es un botón de radio), llama al setNotification método que pasa el valor. Si el valor es notificación por ‘texto’, establece la validación del teléfono como requerida.
De lo contrario, borra la validación del campo de teléfono.
Entonces eso deber llamada updateValueAndValidity para actualizar la información del formulario con esta nueva validación.
Incluso los campos están ocultos para el usuario, los campos están activos en el formulario reactivo. Entonces, simplemente necesita deshabilitar el campo del reactivo usando el siguiente código
this.myForm.get("nickName").disable();
Cambie la función toggleNick() como se indica a continuación
toggleNick()
this.showNick = !this.showNick;
if(showNick)
this.myForm.get("nickName").enable();
else
this.myForm.get("nickName").disable();
Creo que la mejor opción para hacer esto es hacer que los campos formen parte del formulario inicial con todas sus validaciones y cuando quieras deshabilitar y habilitar campos o formularios anidados mediante programación.
Ejemplo: https://stackblitz.com/edit/angular-ojebff
https://stackblitz.com/edit/angular-ojebff?embed=1&file=app/input-errors-example.html