是否可以在Angular6中计算多个输入字段中的字符数

我正在动态地将包含FormControls的FormGroups添加到FormArray中，并在UI中将表单的控件显示为输入字段。我想计算在UI中添加的每个FormGroup的sectionContent字段中键入的字符数。这是完全可能的，只有一个FormGroup，因为我可以订阅valueChanges方法，将值的长度传递给变量，然后在UI中插入变量。但是，多个动态添加的FormGroup及其FormControl是否可能？问题是每个FormGroup都需要一个新的变量注入html代码，我不确定这是否可行。也许有另一种方法可以计算UI中多个字段中的字符数

HTML:

---

也可以创建管道。管道它只是一个接收参数并返回值的函数。可以使用一个简单的计数管道

@Pipe({name: 'countPipe'})
export class CountPipe implements PipeTransform {
  transform(value: string): string {

    return value?value.length+' characters, '+value.split(' ').length+' words'
                :'0 characters, 0 words';
  }
}

你可以用

{{section.get('sectionContent').value |countPipe}}

注意：不要忘记在您的模块中包含管道as声明

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, CountPipe ], //<--HERE
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

@NgModule({
导入：[BrowserModule，FormsModule]，
声明：[AppComponent，CountPipe]，//您想要合并计数或每个文本区域的计数？获取计数，然后做什么？我您只想在UI上显示，然后使用
管道
，如果您需要一些计算的计数，那么获取
FormArray
并从中获取所有
FormGroup
元素并获取每个元素的计数…在循环中
{section.Get（'sectionContent'）.value？.length}
实际上，我对字符数和合并字数都感兴趣。我还想动态添加文本区域，以便实时合并和计算字数。@miselking，为了在UI中显示，您能给我一个管道示例吗？@Eliseo，非常感谢它起作用。我不知道我们可以查询directl表单用户界面中的y。
{{section.get('sectionContent').value |countPipe}}

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, CountPipe ], //<--HERE
  bootstrap:    [ AppComponent ]
})
export class AppModule { }