Você nesse caso, não precisa de um *ngIf. Você precisa de uma validação customizada. Tipo, para início, você precisa que seus inputs de On e Off sejam conectados. E isso é simples até, você vai chamar o input com o mesmo nome no parametro formControlName mais ou menos assim:
<form [formGroup]="form">
<input type="radio" formControlName="active" value="on" > ON
<input type="radio" formControlName="active" value="off"> OFF
</form>
Com isso, você já consegue obter com tranquilidade qual valor o usuário está colocando no Radio, se é ON ou OFF.
Depois, você vai adicionar os outros dois inputs e ficaria mais ou menos assim:
<form [formGroup]="form">
<input type="radio" formControlName="active" value="on" > ON
<input type="radio" formControlName="active" value="off"> OFF
<input type="number" formControlName="timeRun" >
<input type="number" formControlName="TimeCancel" >
</form>
Aí, tendo isso você poderia criar um validador personalizado para o que tu quer, num arquivo chamado tipo time.validator.ts::
import { AbstractControl } from '@angular/forms';
export function validateTime(control: FormControl): ValidationErrors {
const active = control.get('active');
const timeRun = control.get('timeRun')
const timeCancel = control.get('timeCancel')
if (! !(active === 'on') && timeRun < timeCancel)
) {
// Retorna aqui um erro
return {timeRun : 'O tempo para cancelar nao pode ser maior que o tempo para executar'};
}
// Se ele entrar no if, não passa por aqui. Senão entrar ele
// retorna null, que significa sem erro.
return null;
}
E depois de devidamente importado você coloca esse validador no input de timeCancel, que é onde seu form já tem todos os dados para validar.
this.form = this.fb.group({
active: ['', [Validators.required]],
timeRun: ['',[Validators.required]],
timeCancel: ['',[Validators.required, validateTime]],
});
Claro, eu não testei nem nada, mas acho que deu pra pegar a ideia. Com isso em mãos, você só vai usar o *ngIf pra exibir a mensagem de erro, caso tenha.
