Тип ввода = "число" умножает сообщения об ошибках валидации на clr-control-error - PullRequest
Новая
       7

Тип ввода = "число" умножает сообщения об ошибках валидации на clr-control-error

0 голосов
/ 23 декабря 2018

Я сейчас работаю с 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]
    });
  }
}

1 Ответ

0 голосов
/ 02 января 2019

Буква 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.

...