html - 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 的字段属性。但是对于带有 ccy 的输入, 当输入为空时，angular 中存储的默认值不是 null但是 $ , 无法跳闸 $error.required健康)状况

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

反正有没有保留 ccy格式化但不知何故仍然使用 $error.requried在输入字段中？

Answer 1

标准似乎是在 $ 前面加上一个输入，并且只输入数量而不是符号。
bootstrap 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>