0

Em um formulário Angular 9 tenho um componente que em seu (blur) realiza alguns cálculos com valores existentes na tela. O mesmo também faz um subscribe para o back obtendo algumas informações necessárias para o cálculo. Tudo isso tem funcionado corretamente, exceto quando eu modifico o foco deste componente para o botão salvar do formulário (realizando a ação de (click) no mesmo). Quando isso ocorre o evento (blur) é excetuado corretamente, porém, o evento (click) não é chamado. Realizando alguns teste vi que comentando o subscribe do evento (blur) o problema não ocorre. Alguém já passou por isso? Sabe porque ocorre?

<div class="row">
    <div class="cl-ds-3 cl-tb-2 cl-mb-2">
        <label class="label">Taxa</label>
        <div class="input-group">
        <input
            [(Model)]="Classe.Taxa"
            (Blur)="CalcularValores()"
            required
        ></input>
    </div>
</div>

  public CalcularValores() {
    if (this.Classe.Taxa != undefined) {
        this.ClasseService.CalcularValorEfetivo(this.Classe).subscribe((resultado) => {
          this.Classe.Resultado = resultado.ValorEfetivo;
        });
    }
  }

  public Salvar() {    
    //evento é ignorado quando é executado o (blur) citado acima
    if (this.IsFormValid(this.Classe)) {
      this.PersistentMethod.subscribe((retorno) => {
          this.Classe = retorno;
      });
    }
  }  
2
  • Não deu pra entender!
    – LeAndrade
    Commented 28/05/2020 às 20:31
  • Ao sair do componente com o evento (blur) clicando direto no botão de salvar do formulário o angular executa apenas o evento (blur) e ignora a ação (click) feita no botão, sendo necessário que o usuário clique novamente no botão. Commented 28/05/2020 às 21:07

1 Resposta 1

-1

Tente dessa forma:

<div class="row" [formGroup]="meuFormulario" (ngSubmit)="submitFormTaxa()">
<div class="cl-ds-3 cl-tb-2 cl-mb-2">
    <label class="label">Taxa</label>
    <div class="input-group">
    <input
        formControlName="taxa"
        (Blur)="CalcularValores()"
        required
    ></input>
</div>
<button
  type="submit"
  [disabled]="!meuFormulario.valid">
    Salvar
</button>

constructor(private formBuilder: FormBuilder ) {}

public meuFormulario: FormGroup;
ngOnInit(): void {
    this.meuFormulario = this.formBuilder.group({
      taxa: ['', [ Validators.required,]]
    });
}
public submitFormTaxa(): void {
    if (this.formTaxa.valid) {
      console.log(this.formTaxa.value)
    }
}

Dessa forma funciona, e está de acordo com boas práticas do Angular.

Se não me engano o NgModel está sendo depreciado

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .