Angular 空输入验证因货币而失败

Question

考虑一个带有红色错误文本的 HTML 输入表单，它会在字段为空时发出通知。注意它依赖于ng-show=$error.required && $touched

<div class="form-group">
    <div class="input-group">
        <input id="qp-cargo-value" name="qpCargo" placeholder="$" type="text" 
               class="form-group" currency="229" data-ng-model="cargoValue" required>
    </div>
    <div class="rederrorlabel"
         ng-show="myform.qpCargo.$error.required && myform.qpCargo.$touched">
        Error - Cargo value is required
    </div>
</div>

它适用于没有该ccy属性的字段。但是对于输入 with ccy，当输入为空时，存储在 angular 中的默认值不是nullbut $，这无法触发$error.required条件

这是我输入然后删除值时的值的控制台输出，确认它永远不会设置为 null 而是设置为"$".

无论如何要保留ccy格式但仍以某种方式$error.requried在输入字段中使用？

Answer 1

标准似乎是在 $ 前面添加一个输入，并且只接受金额而不是符号。

引导程序 EX：

如果您希望保持原样，您可以编写一个方法来检查返回 bool 的有效条目并将其用于 ng-show。

  public currencyValidation(): boolean {
    return myform.qpcargo.value.replace('$', "").length < 1;
  }

<div class="form-group">
    <div class="input-group">
        <input id="qp-cargo-value" name="qpCargo" placeholder="$" type="text" 
               class="form-group" currency="229" data-ng-model="cargoValue" required>
    </div>
    <div class="rederrorlabel"
         ng-show="currencyValidation() && myform.qpCargo.$touched">
        Error - Cargo value is required
    </div>
</div>