Bdtjtk

I'm working now with Clarity in a personal project, I like so much this Design System, so I will stay asking a lot (sorry for that).

I was trying today to implement multiples validation message errors for a type number input into a form. Docs explains that I should use *clr-control-error to achieve that but it has been impossible.

At the moment validating type number input to show a "required" text works just fine.

View post on imgur.com

But what about if user try to type a letter in the field? It happen with 'e' character. In that case, I want to show another text like "Invalid parameter" or something related.

View post on imgur.com

I was trying do this:

<clr-input-container>

      <label class="clr-col-4 clr-col-md-4">Precio de Costo</label>

      <input class="clr-col-8 clr-col-md-8" clrInput type="number" formControlName="precioCosto" />

      <clr-control-error *clrIfError="'required'">Requerido</clr-control-error>

      <clr-control-error *clrIfError="'invalid'">Parámetro Inválido</clr-control-error>

 </clr-input-container>

But always show the first message. I was also trying to do with *ngIf but look like there is a conflict with *clr-control-error.

Did you get some way to solve this? I will very grateful with you help.

Update: adding Controller code to clarify issue:

import { Component, OnInit } from '@angular/core';

import { FormBuilder, Validators, FormGroup } from '@angular/forms';



@Component({

  selector: 'app-productos',

  templateUrl: './productos.component.html',

  styleUrls: ['./productos.component.scss']

})

export class ProductosComponent implements OnInit {



  private productoForm: FormGroup;



  constructor(

     private fb: FormBuilder

  ) { }



  ngOnInit() {

    this.setProductoForm();

  }



  get f() { return this.productoForm.controls; }



  setProductoForm() {

     this.productoForm = this.fb.group({

      id: [this.productos.length + 1],

      nombre: ['', Validators.required],

      laboratorio: ['', Validators.required],

      unidadMedida: ['', Validators.required],

      precioCosto: ['', Validators.required],

      precioVenta: ['', Validators.required]

    });

  }

}

The letter e is a valid character in a number field when you use it with a digit as well, since that is a way to denote exponents. There may be inconsistencies in browsers about how they handle this but here is the spec https://www.w3.org/TR/html5/sec-forms.html#number-state-typenumber. This is really as expected since you've not put in a required value yet, so you get require error type. There are other characters like - that might be typed in the field but still not a value by themselves.

You could write your own validator to handle these cases on your own. There is no invalid validator by default, you'd have to write it, see https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation.