Home / Questions / 302378
Accepted
Jhoa Khriz
Asked: 2020-10-21 20:20:05 +0800 CST 2020-10-21 20:20:05 +0800 CST

How can I compare two numbers entered by the user in ANGULAR?

  • 772

Can you help me how I compare two numbers in Angular. Taking into account that the minimum value must be less than the maximum value. I have the idea how to compare them, but I don't know how to get the values ​​entered by the user or if there is any way with *ngIf to be able to compare.

onSubmit() {
  this.enviado = true;
  this.comparador();
}

public comparador() {
  // this.comp.testCall();
  console.log('ingreso ');
  if (this.tipoValoracion_ValMaximo >= this.tipoValoracion_ValMinimo) {
    console.log('ingreso al if');
    this.Save();
  } else {
    console.log('ingreso al else');
    alert('El valor maximo debe ser mayor al valor minimo cree nuevamente el tipo de valoracion');
  }
}
<div class="form-group">
  <label for="name">VALOR MINIMO:</label>
  <input type="number" class="form-control" id="tipoValoracion_ValMinimo" [(ngModel)]="tipoValoracion.tipoValoracion_ValMinimo" name="tipoValoracion_ValMinimo" pInputText pKeyFilter="int" placeholder="Valor Minimo" maxlength="3" title="COLOCAR VALOR MINIMO"
    autocomplete="off" min="0" fromControlName="valminimo" required maxlength="150" #valminimocontrol="ngModel">
</div>
<div class="form-group">
  <label for="name">VALOR MAXIMO:</label>
  <input type="number" class="form-control" id="tipoValoracion_ValMaximo" required [(ngModel)]="tipoValoracion.tipoValoracion_ValMaximo" name="tipoValoracion_ValMaximo" pInputText pKeyFilter="int" placeholder="Integers" placeholder="Valor Maximo" maxlength="3"
    title="COLOCAR VALOR MAXIMO" autocomplete="off" min="0" fromControlName="valmaximo" required maxlength="150" #valmaximocontrol="ngModel">
</div>
enter image description here

angular5

1 Answers

  1. Best Answer

    The correct way would be to create a Validator. In the case of reactive forms it is as simple as declaring the function and adding it to the formGroup, but when working with "template" forms, you have to create a directive.

    Suppose you have something like:

    <form #miForm="ngForm" comprobarMaxMin>
    <div class="form-group">
      <label for="name">VALOR MINIMO:</label>
      <input type="number" class="form-control" id="tipoValoracion_ValMinimo" [(ngModel)]="tipoValoracion.tipoValoracion_ValMinimo" name="tipoValoracion_ValMinimo" pInputText pKeyFilter="int" placeholder="Valor Minimo" maxlength="3" title="COLOCAR VALOR MINIMO"
        autocomplete="off" min="0" fromControlName="valminimo" required maxlength="150" #valminimocontrol="ngModel">
    </div>
    <div class="form-group">
      <label for="name">VALOR MAXIMO:</label>
      <input type="number" class="form-control" id="tipoValoracion_ValMaximo" required [(ngModel)]="tipoValoracion.tipoValoracion_ValMaximo" name="tipoValoracion_ValMaximo" pInputText pKeyFilter="int" placeholder="Integers" placeholder="Valor Maximo" maxlength="3"
        title="COLOCAR VALOR MAXIMO" autocomplete="off" min="0" fromControlName="valmaximo" required maxlength="150" #valmaximocontrol="ngModel">
    </div>
</form>

    I have added an empty attribute, comprobarMaxMin. That will indicate to Angular that there is something to apply there, a directive:

    @Directive({
  selector: '[comprobarMaxMin]',
  providers: [{ provide: NG_VALIDATORS, useExisting: ComprobarMaxMin, multi: true }]
})
export class ComprobarMaxMin implements Validator {
  validate(form: AbstractControl): ValidationErrors {
    const min = form['tipoValoracion_ValMinimo'].value;
    const max = form['tipoValoracion_ValMaximo'].value;
    if (min <= max) {
      return null; //no hay errores
    }
    return { minMayorQueMax: true}; //devolvemos un objeto que indica el error
  }
}
    • 0