Question

我尝试使用以下正则表达式设置模式验证程序：

^(((0|[1-9]\d{0,2})(\.\d{2})?)|())$

这应该允许我获得1到3位数，然后是最多2位数的小数部分，这也应该允许空值。

问题是我的输入是text类型而验证器拒绝我的输入（任何输入，因为它不被认为是我认为的数字）;或输入的类型为number且没有step="any"如果我有一个十进制输入（当正则表达式似乎在处理更简单的值时），我的输入值被拒绝，并且step="any"它似乎我的正则表达式根本不起作用，因为step而允许任何值。

<form (ngSubmit)="onSubmit()" #bottleUpdatePriceForm="ngForm" >

    <div class="form-group" *ngFor="let bottle of bottleArrayToUpdate; let i = index">
      <label for="bottlePrice">{{bottle.name}} : </label>
      <input type="number" class="form-control" name="bottlePrice" autocomplete="off" step="any"
      [pattern]="pricePattern"
      [(ngModel)]="bottleArrayToUpdate[i].price">
    </div>

    <button type="submit" class="btn btn-default">Submit</button>
    <!--(click)="bottleUpdatePriceForm.reset();"-->
</form>

编辑：为正则表达式绑定添加我的组件代码

private pricePattern = /^(((0|[1-9]\d{0,2})(\.\d{2})?)|())$/;

无论是文字还是数字，我都不在乎，我只是需要这种模式来处理我的意见......任何洞察力或我缺少的东西？

以下是plunkr中的一个工作示例：https://plnkr.co/edit/znVaS7?p=info

您可以在plunkr中切换输入行以查看不同的情况：

<input type="text" class="form-control" name="bottlePrice" autocomplete="off"

<input type="number" class="form-control" name="bottlePrice" autocomplete="off" step="any"

与主要问题无关：有没有办法从组件调用表单重置而不是直接在模板中？ ==> bottleUpdatePriceForm.reset();

我很想知道，这只是为了奖金。

非常感谢

Answer 1

这不是针对不正常工作的正则表达式的直接解决方案，但这可以用于相同的目的。因此，请删除模式，只需使用max和min更改输入：

<input type="number" class="form-control" name="bottlePrice" 
     autocomplete="off" step="any" max="999" min="0"
     [(ngModel)]="bottleArrayToUpdate[i].price">

输入上的Angular2模式验证器

1 个答案: