Angular6 - Пользовательское поле ввода

Question

Мне нужно создать поле ввода в Angular, в этом поле ввода можно использовать только число с двумя десятичными знаками, например '123455.12'

Ниже приведено то, что я пробовал до сих пор

<input myCustomDirective type="text">

Iсоздана директива.В моем CustomDirective я использовал HostListener для события нажатия клавиши, в этом слушателе я использовал регулярное выражение для проверки, но он разрешает только число, которое он не позволяет ввести '. (Точка)'

new RegExp('^[0-9]*$'); // мое регулярное выражение

Answer 1

Вот директива, которая принимает только десятичные значения с пользовательской точностью.

https://stackblitz.com/edit/angular-decimal-directive

• Это позволит вам вводить цифры перед. (точка)
• Это не позволит вам вставить (Ctrl + V) недесятичной.
• Это займет один. (точка).по умолчанию это займет 2 цифры после.(точка).

Пример:

`<input type="text" [(ngModel)]="myVar" decimal>`

Но вы можете определить размер точности следующим образом: -

`<input type="text" [(ngModel)]="myVar" [decimal]="3">`

• Если вы хотите использовать только целое число, а не число с плавающей запятой, вы можете использовать директиву следующим образом:

  <input type="text" [(ngModel)]="myVar" [decimal]="0">

• Если вы этого не сделаетеДостаточно точная точность ввода, тогда он автоматически завершит остаток точности числа (также, если требуется точка (точка)) событием onblur.

• Вы не можете ввести строковое значениедвухсторонним связыванием.

Примечание: [(ngModel)] является обязательным для использования Директивы.

Answer 2

шаблон ng, который вы регистрируете, равен ng-pattern=" /^[.\d]+$/"

Answer 3

Пожалуйста, проверьте скрипку jsfiddle.net / gsferreira / Lsv9f0b0 , размещенную в ссылке, ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" это ключ

Из скриптовой ссылки простого простого Java-скрипта https://jsfiddle.net/j3cbytws/

Пожалуйста, указывайте только цифры и одну точку, ничего больше:

<input type="number" name="someid" onkeypress="return isNumberKey(event)" /> 

<script>
var isDecimalAlredyEcountered = false;
function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : event.keyCode
    if(isDecimalAlredyEcountered && charCode === 46)
    return false;
   if(charCode == 46)
    {isDecimalAlredyEcountered =true;
    }
    if (charCode > 31 && (charCode < 48 || charCode > 57)&& charCode != 46)
        return false;
    return true;
}    
</script>

В приведенной выше реализации может возникнуть проблема с символами возврата и удаления, поэтому вам нужно сбросить состояние при сбросе