Angular2:如何在响应式表单输入中显示字符数

Angular2: how do display character count on reactive form input

本文关键字：输入 显示 字符 表单 响应 Angular2      更新时间：2023-09-26

我正在使用Angular2响应式表单，并且我想显示一个textarea的字符计数作为用户类型。

我希望只是能够包括的形式控制的name.length在我的html像这样:

<div class="form-group">
  <label for="incidentDescription">Brief Description of Incident</label>
  <textarea id="incidentDescription" formControlName="incidentDescription" required [attr.maxLength]="maxIncidentDescriptionLength"></textarea>
  <small><code>{{alaynaPage.incidentDescription.length}}</code> of <code>{{maxIncidentDescriptionLength}}</code> characters</small>
</div>

这"工作"，但length的形式控制滞后一个击键。例如，如果我在文本区域中输入a, {{alaynaPage.incidentDescription.length}}是0。如果是，然后输入b(所以字符串是ab) {{alaynaPage.incidentDescription.length}}现在是1。

我如何使这个工作如预期的?

我让它通过黑客工作，但必须有一个更简单的方法:

//in component:  
theLength: number = 0;
ngOnInit(): void {
    this.buildForm();
    (this.alaynaPageForm.controls['incidentDescription'] as FormControl).valueChanges.subscribe(value => {
      // do something with value here
      this.theLength = value.length;
    });
  }
//in my html:
<small class="form-text text-muted"><code>{{theLength}}</code> of <code>{{maxIncidentDescriptionLength}}</code> characters</small>

你只需要使用一个模板引用变量

<textarea id="incidentDescription" formControlName="incidentDescription" #incidentDescription></textarea>
<small class="form-text text-muted"><code>{{incidentDescription.value.length}}</code> of <code>{{maxIncidentDescriptionLength}}</code> characters</small>

你想要一个hack，这里有一个hack。使用:

{{alaynaPageForm.value?.incidentDescription?.length}}
相关文章：