重叠浮动标签

Question

我在angular中有一个组件，它的UI类似于this，它是它的初始外观，并且它的html / angular代码是

<mat-form-field class="input-cont" [floatLabel]= "'auto'">
        <input matInput #inputDiv
          (keydown.enter)="addMoney($event)"
          placeholder="{{ 'ent_amt_to_add' | translate }}"
          type="number"
          [(ngModel)] = "amount"
          class="text-body-medium">
      </mat-form-field>

当我将焦点放在诸如this之类的文本框上并单击带有数字的按钮时，文本框就象this一样。那些带有数字的按钮的HTML /角度代码为

<div class="denominations-cont">

        <ng-container *ngFor="let denomination of denominations; let i = index">

          <div class="single-denomination-cont txt-lg-bld-dark border" ncAllowSingleClick [ncPreventDoubleClick]=100 
            (ncClick)="addDenomation(denomination, inputDiv)">
            {{ 'ent_amt_amount_val' | translate :[denomination] }}
          </div>

        </ng-container>  

      </div>

和其他相关代码是

addDenomation(denomination : string, inputDiv : any) {
    // inputDiv.blur()
    if(!this.amount) this.amount = 0
    this.amount += Number(denomination.substring(1))
  }

在添加面额功能无法执行但没有任何反应之前，我曾尝试模糊文本框。

我正在ios应用程序的wkwebview中打开此有角度的应用程序。

我不知道它是否是错误或某些代码问题。请帮忙。