1

Me pueden ayudar como comparo dos números en Angular. Teniendo en cuenta que el valor mínimo debe ser menor al valor máximo. Tengo la idea como compararlos, pero no se como obtener los valores que ingrese el usuario o si existe alguna forma con el *ngIf para poder comparar.

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>
introducir la descripción de la imagen aquí

1
  • ¿Has pensado en usar formularios reactivos? En mi opinión, a largo plazo es más sencillo trabajar con ellos Commented el 21 oct. 2019 a las 9:36

1 respuesta 1

0

La forma correcta sería crear un Validator. En el caso de los formularios reactivos es tan sencillo como declarar la función y añadirla al formGroup, pero al trabajar con formularios "de plantilla", has de crear una directiva.

Supongamos que tienes algo como:

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

He añadido un atributo vacío, comprobarMaxMin. Eso indicará a Angular que hay algo que aplicar ahí, una directiva:

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

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.