Angular2 FormArray - ページ上にテキストエリアの文字数を表示します。

Question

FormArrayの各textarea要素の文字カウントを表示したいとします。

これは私が持っているものです。インデックスを使用する方法や、現時点でalocalnameのプレースホルダを持つ一意のローカル変数名を動的に作成する方法はありません。これどうやってするの。

<div class="list-group" formArrayName="texts"> 
    <div class="row" 
    *ngFor="let text of profileForm.controls['texts'].controls; let i = index;"> 
     <div formGroupName="{{i}}"> 
      <div> 
      <textarea type="text" class="form-control" formControlName="text" #alocalname></textarea> 
      <small class="form-text text-muted"><code>{{alocalname.value.length}}</code> of characters</small> 
     </div>   
     </div> 
    </div> 
</div> 

Answer 1

各controlの値にアクセスするだけで反復処理が必要です。

したがってtext.get('text').value.lengthが動作するはずです。

<div class="list-group" formArrayName="texts"> 
    <div class="row" 
    *ngFor="let text of profileForm.get('texts').controls; let i = index;"> 
     <div [formGroupName]="i"> 
      <div> 
      <textarea type="text" class="form-control" formControlName="text"></textarea> 
      <small class="form-text text-muted"><code>{{text.get('text').value.length}}</code> of characters</small> 
     </div>   
     </div> 
    </div> 
</div>