在输入框内显示一个元素答案

【问题标题】：showing a element inside input box在输入框内显示一个元素
【发布时间】：2020-11-17 23:27:52
【问题描述】：

我有一个使用角反应形式创建的输入框

<input type="text" formControlName="OrgName" placeholder="Enter name" maxlength="60">
<p  class="fieldRequired" *ngIf="showNameMSg">{{60-profileForm.value.OrgName.length}} characters remaining </p>

限制为 60 个字符。目前我在输入框下的 p 标签上显示它。如何在输入框中使用某种指示器显示剩余字符数。

即使指标没有完成..至少我必须显示剩余的可用字符数..

【问题讨论】：

标签： css angular input angular-material

【解决方案1】：

使用Angular Material CDK inputs可以轻松完成，使用属性suffix，通常用于设置图标，但也可以根据需要设置更多信息。

例如，在电话输入中：

<form class="example-form">
  <mat-form-field class="example-full-width">
    <mat-label>Telephone</mat-label>
    <input type="tel" matInput placeholder="555-555-1234">
    <div matSuffix>{{counter}}</div>
  </mat-form-field>
</form>

您只需要建立更丰富的反馈即可。你可以测试一下here。

【讨论】：

是的..它有点工作..但它在我的表单中的其他输入中脱颖而出..如何禁用材质样式..这样它看起来很简单，带有引导类“表单控制”
在这种情况下，您将需要像 Pooja Mule 所说的那样使用 css，或者考虑是否需要更高级的东西并考虑使用 cdk 修改为您自己的风格。不难。

【解决方案2】：

如果你想在 CSS 的帮助下实现你想要的，你可以参考这个- https://stackblitz.com/edit/angular-7xmzzf

您必须提供一个父 div，其 位置为相对于您的输入和计数器 p 标记。

p 标签的位置将是绝对，您可以使用 CSS（顶部，右侧）对其进行调整，使其相对于您的输入标签处于所需位置。

【讨论】：