角5 - 如何$符号添加到输入字段

问题描述 投票:0回答:4

我有一个量的选取器组件使用,进入输入字段和金额滑块来量。

像这样的事情enter image description here

和代码

<div class="row clearfix consumer-slider">
  <div class="half-width">
    <div class="col-left row clearfix rel inlined-label flex">
      <label class=" half-width slider-label inline accent-color">{{ label }}</label>
      <mat-input-container class=" half-width inline slider-inputs">
        <input matInput name="amountRequired" [min]="minAmount"  type="text"  [max]="maxAmount" placeholder=""  (change)="changeAmountValue()" [(ngModel)]="amount">
      </mat-input-container>
    </div>
  </div>
  <div class="half-width">
    <div class="col-right">
      <div class="row clearfix rel">
        <!-- range slider for amount required -->
        <mat-slider class="full-width" [min]="minAmount" [max]="maxAmount" step="{{step}}" [(ngModel)]="amount" thumbLabel (change)="updateAmountValue($event)"></mat-slider>

        <p class="min-amount small">{{minAmount | customCurrency}}</p>
        <p class="max-amount small">{{maxAmount | customCurrency}}</p>
      </div>
    </div>
  </div>
</div>

我想问的问题是,如何只是在号码前加$符号。

我试图添加<span matPrefix>$ &nbsp;</span>,但是$符号是在提交的输入,这是不是我想要什么的开始。

enter image description here

我想实现的是输入字段应与前一个$符号显示的号码,滑块还必须更改的数量控制。

我的代码是工作的罚款没有$符号。

感谢所有帮助。

angular
4个回答
0
投票

代表货币你的价值的标准方法是使用currency管像<span>{{myValue | currency }} </span>


0
投票

我认为这更多的是一个HTML CSS问题。既然你是在输入栏上,遗憾的是它不注册伪元素,如::之前或之后将做这一件轻而易举的事。就像使用密码输入显示的按钮或眼睛图标,你需要的包装和两个元素:

<div class="input-wrapper">
  <span class="input-currency">$</span>
 <input type="number" name="amount" />
</div>

而对于你的CSS

.input-wrapper {
  position: relative;
}
.input-currency {
  position: absolute;
  left: 10px;
  top: calc(100% - 1.35em);
  line-height: 1em;
  font-size: 1em;
}

.input-wrapper > input {
  padding-left: 16px;
  font-size: 1em;
}

这将从根本上实现你在找什么。对齐是另一个话题,但最重要的是,你的包装有一个位置相对,货币或跨距的位置绝对和您的输入左填充比你跨度的左侧位置,更大一点。

希望能帮助到你


0
投票

如果货币符号是固定的,即无需在本地,没有必要进行格式化,那么这将始终工作:

   <p class="min-amount small">${{minAmount}}</p>

0
投票

你已经错了约束。您需要香蕉在框结合[(ngModel)] =“串行”,而不是[ngModel] =“串行”

()中的结合将更新串行模型每次当输入将是变化。从输入到模型

单[]将只结合串行的数据,如果它将由代码手动更改。这将导致单向绑定 - 从模型到输入。

正如你猜想 - 一起[()],他们将双向绑定

© www.soinside.com 2019 - 2024. All rights reserved.