angular - 是否可以在Angular6中的多个输入字段中计算字符
问题描述
我动态地将包含 FormControls 的 FormGroups 添加到 FormArray 中,并将 UI 中的表单控件显示为输入字段。我想计算在 UI 中添加的每个 FormGroup 的 sectionContent 字段中输入的字符。这完全可以只使用一个 FormGroup,因为我可以订阅 valueChanges 方法,将值的长度传递给一个变量,然后在 UI 中插入该变量。但是是否有可能使用多个动态添加的 FormGroup 及其 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 { }
推荐阅读
- c# - 如何将用户输入表单的文本框动态添加到 C# GUI?
- javascript - 如何在 react-static 中为每个页面生成单独的 css 文件
- reactjs - 纱线构建不起作用并给了我错误134
- r - 按 R 中的特定日期范围过滤
- ios - 如果 iOS App Clip 的 App 已经具备推送通知功能,它是否需要它?
- python - 为什么 PyShark 会在超时的情况下继续 LiveCapture?
- git - 如何将本地文件夹推送到新的 Github 存储库?
- sharepoint - 在从模板提供共享点时调用 ClientContext.Web.ApplyProvisioningTemplate() 时出现 Web 异常
- python-3.x - Folium 和 Geopandas 对象
- canvas - 调整画布大小,保持内容比例,避免拉伸