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

Question

我正在使用Angular2反应形式,我希望textarea在用户输入时显示a的字符数.

我希望能够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形式控制滞后一个键击.因此,例如,如果我输入atextarea {{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>

Answer 1

您只需要使用模板引用变量

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