Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

Validação Assíncrona Saindo Do Input

Boa Tarde, Gostaria de saber se há um modo de realizar a requisição com API somente após eu sair do campo ou caso submeter o formulário e tiver inválido não salvar, ao invés do debounceTime que é por tempo !? Obrigado.

6 respostas

Fala aí Gabriel, beleza? É possível sim, você pode estar utilizando o blur, por exemplo:

<input (blur)="realizarRequisicao()">

Espero ter ajudado

Olá Gabriel, é possível sim, você pode utilizar o focusout para realizar alguma ação quando o usuário retirar o foco do seu input. Por exemplo:

<input (focusout)="funcao()">

Espero ter ajudado em algo,

Abçs.

Está é a tag que irá chamar a função assíncrona

<!-- Início Tag CPF -->
            <div class="col-sm-6">
                <div class="form-group">
                    <label for="cpf">CPF</label>
                    <input formControlName="profissionalCpf" type="text" class="form-control" mask="000.000.000-00" placeholder="Digite um cpf válido...">{{CPF | mask: '000.000.000.99'}}
                    <!-- Mostra Mensagem de Validação Caso Não Preencha a CPF -->
                    <gc-mensagem-validacao *ngIf="profissionalForm.get('profissionalCpf').errors?.required && form.submitted"
                    mensagem="{{ mensagemGenerica.profissionalCpf }}"></gc-mensagem-validacao>
                    <!-- Mostra Mensagem de Validação Caso o CPF Não Seja Válido (Assincrono) -->
                     <gc-mensagem-validacao *ngIf="profissionalForm.get('profissionalCpf').errors?.cpfValido"
                    mensagem="{{ mensagemGenerica.profissionalCpfValido }}"></gc-mensagem-validacao> 
                </div>
            </div> <!-- Fim Tag CPF -->    

ai no componente tenho o seguinte chamado da função assíncrona na validação:

profissionalCpf: ['', 
                Validators.required 
                // this.cpfValidadorServico.ValidaCpfAssincronoProfissional()
            ],

tudo como em aula. e no validador possuo o seguinte código:

ValidaCpfAssincronoProfissional() {
        return (controle: AbstractControl) => {

            return controle
                .valueChanges
                .pipe(debounceTime(300))
                .pipe(switchMap(cpf => 
                    this.cadastroProfissionalServico.ValidaCpfAssincronoProfissional(cpf)
                ))
                .pipe(map(valido => valido ? {cpfValido: true} : null))
                .pipe(first());
        }
    }

no caso do validador, onde está o debounceTime(300) que é apos 300 ms ele envia a requisição gostaria de enviar a resquisição somente após a saída dele do input. é do mesmo formato ? que mandaram, pois chamo a função de validação como a das aulas.

solução!

Então Gabriel, para validar apenas na saída do input, faz no blur.

Espero ter ajudado

Matheus agora eu entendi :D. vlws :D antes tinha ficado meio confuso, mais ja consegui compreender. :D depois de um tempo heheheh. obrigado. aos dois que se propuseram a me ajudar.

Magina, precisando não deixe de criar suas dúvidas.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software