Angular2：如何显示反应形式输入字符计数

Question

我正在使用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到textarea的{{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

你只需要使用一个template reference variable

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

Answer 2

你想一劈，这里的黑客。使用此：

{{alaynaPageForm.value?.incidentDescription?.length}}