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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了是否可以在Angular6的多个输入字段中对字符进行计数相关的知识,希望对你有一定的参考价值。

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

HTML:

<div class="container">
<div formArrayName="section" *ngFor="let section of myForm.get('section').controls; let i = index">
   <div [formGroupName]="i">
      <div class="row">
         <div class="col-sm-8">
            <div class="form-group">
               <textarea class="form-control" [id]="'sectionContent' + i" placeholder="Main Content" formControlName="sectionContent"></textarea>
             </div>
         </div>
      </div>
   </div>
</div>

<div class="form-group">
   <div class="col-md-offset-2 col-md-4">
      <button type="button" class="btn btn-primary" 
         (click)="addSectionButtonClick()">Add Section</button>
   </div>
</div> 
</div>

组件:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators, FormArray } from '@angular/forms';

@Component({
    selector: 'app-create-section',
    templateUrl: './create-section.component.html',
    styleUrls: ['./create-section.component.css']
})
export class CreateSectionComponent implements OnInit {

myForm: FormGroup;
constructor(private fb: FormBuilder) { }

    ngOnInit() {
        this.myForm = this.fb.group({
            title: ['', Validators.required],
            section: this.fb.array([
                this.addSectionFormGroup()
            ])
        });
}

addSectionButtonClick(): void {
        (this.myForm.get('section') as FormArray).push(this.addSectionFormGroup());
}

addSectionFormGroup(): FormGroup {
        return this.fb.group({
            sectionContent: ['', Validators.required]
        })
}
答案

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

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

注意:不要忘记将管道作为'声明添加到模块中>>

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

以上是关于是否可以在Angular6的多个输入字段中对字符进行计数的主要内容,如果未能解决你的问题,请参考以下文章

是否可以知道用户是否在文本字段中输入或删除字符?

插入多个字符时关闭文本字段

Angular6路由器导航到共享相同组件的多个子路由

如何在 LINQ 中对单个连接中的多个字段进行连接

检查字段是不是已使用 Angular 6 和 Firestore 进行了修改

是否可以将多个输入字段中的一个数据包作为1个包发送到Firebase?