如何在輸入類型號中輸入名稱為“kg”的 append 字符串？ Angular ngModel

Question

我需要在我的 ngModel 類型號中添加 append 'kg' 字符串嗎？ 怎么做？

            <input (click)="singleClickForTraining(set)"
              [ngClass]="{ currentExe : currentSet === set }" 
              [(ngModel)]="set.reps" class="input-invisible-for-sets" type="number">

Answer 1

您的輸入控件是“類型”數字。 意味着它只接受數值，例如。 01234...等

要讓您的輸入控件接受字母數字（文本和數字）值，您需要將類型更改為文本。 只有當“kg”是輸入值的一部分而不是輸入值的描述時，您才應該考慮這樣做。

如果輸入控件的含義或上下文是數字或表示數字值的實體，則應始終將類型保留為數字而不是文本。 這可以保護您或其他代碼片段和/或使用該字段的其他開發人員，這樣他們就不需要進行任何字符串操作來獲取/使用輸入的值，考慮到可能需要將輸入求和一個計算。 例如。 [100kg - 20kg] 不正確，會失敗。

如果“kg”是輸入的描述，那么考慮將其放入 label 控件中，以告訴用戶輸入的確切用途。 例如。 “請以'kg'為單位輸入您的體重”......您可以進一步了解並在輸入中添加一個占位符

eg. <input type='number' placeholder='eg. 100kg' />"

您甚至可以花哨並在輸入包裝器上使用 a:before 或:after 偽 class 並將 content 屬性的值設置為“kg”，然后將其適當地設置為與輸入重疊。

從 ui/ux 角度以及后端考慮，這符合最佳實踐。

有很多方法可以將“kg”放在那里，但讓我們創建好的代碼......

更新：我不明白為什么你不想使用偽 class，還有很多方法可以做到。 您是否也考慮過使用范圍元素。 看看這個小提琴

Answer 2

您需要在ngModel中引用字符串'kg' ，否則它將被評估為另一個 scope 變量。

    <input [(ngModel)]="'kg' + set.reps" type="number">

或者如果 type="number" 不是必需的，那么您也可以執行以下操作：

    <input type="text" pattern="[0-9]" [(ngModel)]="'kg' + set.reps" /> 

希望對您有所幫助，如果不能隨時提出更多問題