Event (click) being undone by (Blur)

Asked

Viewed 63 times

1

In an Angular form 9 I have a component that in your (Blur) performs some calculations with values existing on the screen. It also makes a subscribe for the back obtaining some information necessary for the calculation. All this has worked correctly except when I modify the focus of this component to the save button of the form (performing the action of (click) in the same). When this occurs the event (Blur) is correctly excepted, however, the event (click) is not called. Performing some tests I saw that commenting on the subscribe of the event (Blur) the problem does not occur. Has anyone ever been through it? You know why it occurs? 

<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;
      });
    }
  }
angular typescript angularjs-directives

  • I couldn’t understand it!

  • When leaving the component with the event (Blur) by clicking directly on the save button of the form the angular executes only the event (Blur) and ignores the action (click) made on the button, being necessary that the user click again on the button.

1 answer

0

Try it this way:

<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)
    }
}

In this way it works, and is in line with Angular’s good practices.

If I’m not mistaken Ngmodel is being belittled

Browser other questions tagged angular typescript angularjs-directives

You are not signed in. Login or sign up in order to post.