Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

Solucionado (ver solução)

Validar um campo do TemplateForm com *ngIf

Boa tarde, pessoal. Tudo bem?

Minha dúvida é se eu consigo validar um campo do meu formulário com o *ngIf, e dependendo do resultado que der nessa comparação do *ngIf, informar ao formulário que este campo está válido ou não.

Preciso disso, pois tenho dois <input> do tipo radio, um com valor ONe outro com valor OFF e tenho mais dois <input> do tipo number, que eu chamo de TEMPO-PARA-EXECUTAR e o outro de TEMPO-PARA-CANCELAR.

A validação é que se o input radio estiver marcado como ON, o TEMPO-PARA-EXECUTAR tem que ser maior do que o TEMPO-PARA-CANCELAR.

Alguém pode me ajudar?

2 respostas

Olha, a diretiva ngIf, serve para mostrar algo caso a condição seja atendida. Logo não vejo como ela possa ser util neste seu caso.

Agora que você pode tentar fazer é. Capturar o valor do input ON/OFF. e setar os valores de tempo on teu javascript de acordo com a sua necessidade

solução

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.