Пользовательская маска углового ввода - PullRequest
Новая
       9

Пользовательская маска углового ввода

0 голосов
/ 19 февраля 2019

У меня есть поле ввода , которое заполнено JSON данными объекта. 

 dimension: {
   length: 10.00,
   width: 20.00,
   height: 30.00,
 }

Ввод выглядит так: 

 <input matInput [placeholder]="Dimension (LxHxW)" formControlName="dimensions" 
        name="dimensions" mask="00.0x00.0x00.0" [specialCharacters]="['x', '.']" 
        [clearIfNotMatch]="true" [showMaskTyped]="true"
  />

, где измерения встроены в машинописный код следующим образом: 

 let dimensions = null;
    if (dimensionObject) {
      dimensions = '' + dimensionObject.length + 'x' + dimensionObject.width + 'x'
        + dimensionObject.height;
    }

Цель состоит в том, чтобы правильно отобразить данные на маске и получить длину, ширину и высоту, объединенные символом x между> получить гибкую маску .

Проблема возникает, когда значения размеров имеют разную длину:

например , если размер равен 2,3 x12,3 x 42,2 вместо 2,3 x 12,3 x 42,2 будет отображаться 23,1 x 23,4 x 22. (x смещено).

Какие решения вы, ребята, можете найти?

Ответы [ 2 ]

0 голосов
/ 19 февраля 2019

"angular2-text-mask" Библиотека NPM отлично работает для меня.

https://www.npmjs.com/package/angular2-text-mask Дайте мне знать, если вам нужна помощь.

Спасибо.

0 голосов
/ 19 февраля 2019

Полагаю, вы должны использовать шаблоны

Следующий пример, взятый из этой статьи о CSS-трюках Криса Койера , но созданный Эстель Вейл ,показывает, как обрабатывать канадский почтовый индекс с формой A1A 1A1: 

 <div>
   <label for="czc">Canadian Zip Code</label>
   <input id="czc" placeholder="XXX XXX" pattern="\w\d\w \d\w\d" class="masked" 
       data-charset="_X_ X_X" id="zipca" type="text" name="zipcodeca" 
       title="6-character alphanumeric zip code in the format of A1A 1A1" />
 </div>

, в вашем случае вам следует изменить только регулярное выражение шаблона.

...