шаблон не совпадает в угловой 6 - PullRequest
Новая
       23

шаблон не совпадает в угловой 6

0 голосов
/ 22 октября 2018

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

10.0
100.00
100
1

(число может иметь целую часть без ограничений и десятичную часть с минимум 2цифр).Поэтому, если я введу это значение в поле ввода типа 7.., в поле будет отображаться мой «шаблон ошибок».

Это мой HTML: 

<input type="number" class="form-control" [(ngModel)]="home" name="home" required min="0" step="1" pattern="^[0-9]+(?:[,.]0{1,2})?$" >

В я использую форму TD и вЯ проверяю, что это за ошибка:

form.controls.home.errors.pattern или 

form.controls.home.errors.pattern

Проблема в том, что я поставил этот вход "7....".он показывает мне «обязательную» ошибку, а не «шаблонную» ошибку.Кто-нибудь может мне помочь?

Ответы [ 2 ]

0 голосов
/ 22 октября 2018

Issue

Ваша реализация выглядит нормально, однако имеет небольшую проблему, связанную с вашим типом ввода number.Вы пытаетесь присвоить 7.., который в основном является строковым значением, и вы пытаетесь присвоить number input.Что не возможно.Ни Angular, ни HTML5 не позволят вам сделать это.

Fix

Исправить очень просто.Просто преобразуйте элемент управления типа input, но элемент управления типа text. 

    <input type="text" class="form-control" [(ngModel)]="home" 
name="home" required min="0" step="1" pattern="^[0-9]+(?:[,.]0{1,2})?$" >

Если вы хотите проверить минимальное и максимальное значения, то у вас есть эти проверки в Angular.

Если вы идетедалее, либо вам нужно написать pipe или directive для обработки дела.

0 голосов
/ 22 октября 2018

Здесь required является допустимой ошибкой, поскольку input[type="number"] возвращает значение с типом number и, если ваш ввод не является допустимым числом, оно возвращает null.

Это означает, что если у вас есть required проверка здесь, она будет запущена (и это снова допустимо, потому что на входе нет действительного числа).

Также, используя patternпротив number немного странно.

Вместо этого вы можете

  • пользовательский валидатор, который реализует любую логику, которую вы хотите.Чтобы реализовать эти (или даже найти готовые), проверьте, например, , этот репо
  • использует стандарт input[type="text"], который не имеет этого недостатка и может быть проверен с помощью шаблона.
...