Question

我现在在个人项目中与清晰度一起工作，我非常喜欢这个设计系统，所以我会一直问很多（很抱歉）。

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

目前，验证输入的类型数字以显示“必需”文本就可以了。

但是，如果用户尝试在字段中键入字母怎么办？它以“ e”字符出现。在这种情况下，我想显示另一个文本，例如“无效参数”或相关内容。

我正在尝试这样做：

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

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

输入类型=“ number”乘以clr-control-error的验证错误消息

1 个答案: