Тип ввода = число сообщений об ошибках проверки, кратных с помощью clr-control-error

Сейчас я работаю с Clarity в личном проекте, мне так нравится эта система дизайна, поэтому я буду просить много (извините за это).

Сегодня я пытался реализовать множественные ошибки сообщения проверки для ввода номера типа в форму. Документ объясняет, что я должен использовать *clr-control-error для достижения этой цели, но это было невозможно.

На данный момент проверка ввода номера типа для отображения «необходимого» текста работает нормально.

Просмотреть сообщение на imgur.com

Но что, если пользователь попытается ввести букву в поле? Это случается с символом «е». В этом случае я хочу показать другой текст, например «Недопустимый параметр» или что-то подобное.

Просмотреть сообщение на imgur.com

Я пытался сделать это:

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

Но всегда показывать первое сообщение. Я тоже пытался сделать с *ngIf, но похоже есть конфликт с *clr-control-error.

У вас есть способ решить эту проблему? Буду очень признателен за вашу помощь.

Обновление: добавлен код контроллера, чтобы прояснить проблему:

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