Question

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

我希望能够在我的html中包含表单控件的name.length，如下所示：

<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落后于一次击键。例如，如果我在textarea 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>

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}}

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

2 个答案: