使用 clr-control-error 输入 type="number" 倍数验证错误消息答案

【问题标题】：Input type="number" multiples validation error messages with clr-control-error使用 clr-control-error 输入 type="number" 倍数验证错误消息
【发布时间】：2018-12-23 20:59:02
【问题描述】：

我现在在一个个人项目中使用 Clarity，我非常喜欢这个设计系统，所以我会继续询问很多（抱歉）。

我今天尝试为输入到表单的类型号实现多重验证消息错误。 Docs 解释说我应该使用*clr-control-error 来实现这一点，但这是不可能的。

目前验证类型号输入以显示“必需”文本工作正常。

View post on imgur.com

但是如果用户尝试在字段中输入一个字母呢？它发生在'e'字符上。在这种情况下，我想显示另一个文本，例如“无效参数”或相关内容。

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

【问题讨论】：

能否提供在控制器中创建表单控件的代码？
完成，@JeremyWilken。

标签： vmware-clarity

【解决方案1】：

当您将字母e 与数字一起使用时，它也是数字字段中的有效字符，因为这是表示指数的一种方式。浏览器中处理此问题的方式可能存在不一致，但这里是规范 https://www.w3.org/TR/html5/sec-forms.html#number-state-typenumber。这确实符合预期，因为您还没有输入所需的值，所以您得到require 错误类型。还有其他字符，例如-，可能会在字段中输入，但它们本身仍然不是值。

您可以编写自己的验证器来自行处理这些情况。默认情况下没有invalid 验证器，您必须编写它，请参阅https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation。

【讨论】：