angular - 如何在 Angular 中使用 formArray 修补 formGroup 中的值?
问题描述
一旦用户单击编辑按钮,我想以反应形式修补数据。目前,我可以使用普通字段修补值。但无法修补动态字段和数组中的值。
ngOnInit() {
this.registrationForm = this.fb.group({
personal_details : this.fb.group({
name: this.fb.group({
first_name: [''],
last_name: ['']
}),
about_yourself: [''],
dob: [''],
// lang: [''],
languages_known: this.fb.array([]),
willingly_to_travel: ['']
}),
technologies: this.fb.array([
this.addTech()
]),
certifications : this.fb.array([
this.addCertificate()
]),
});
this.getAllTrainners();
}
当用户单击编辑按钮时,将运行以下功能:
editTrainner(trainner: Trainner) {
this._trainnerservice.currentTrainner = Object.assign({}, trainner);
this.registrationForm.patchValue({
personal_details: { type: Object,
name: { type: Object,
first_name: this._trainnerservice.currentTrainner.personal_details.name.first_name,
last_name: this._trainnerservice.currentTrainner.personal_details.name.last_name
},
dob: this._trainnerservice.currentTrainner.personal_details.dob,
about_yourself: this._trainnerservice.currentTrainner.personal_details.about_yourself,
languages_known: this.fb.array([this.addlanguages_known()]),
willingly_to_travel: this._trainnerservice.currentTrainner.personal_details.willingly_to_travel
}
});
}
addlanguages_known(): any {
const control = this.registrationForm.get('languages_known') as FormArray;
this._trainnerservice.currentTrainner.personal_details.languages_known.forEach(x => {
control.push(this.fb.control(''));
});
}
解决方案
您可以在函数调用中传递确切的 FormGroup。
例如我有这个代码:
let mainFormGroup = new FormGroup({
myFormGroupName: new FormControl(),
myFormArray: new FormArray([])
});
let mainFormGroup = new FormGroup({
myFormGroupName: new FormControl(),
myFormArray: new FormArray([
new FormGroup({
childFormControl: new FormControl(),
})
])
});
对于我的 FormArray,我使用 ngFor
<div *ngFor="let eachFormGroup of mainFormGroup.controls['myFormArray'].controls; let pointtIndex=index;">
稍后在我的循环中我使用:
(change)="onFileChanged($event, eachFormGroup)"
在我的 onFileChange 函数中,我现在可以访问 FormGroup。
onFileChanged(event, eachFormGroup: FormGroup) {
eachFormGroup.patchValue({
childFormControl: 'blablabla'
});
}
您也可以使用 ngFor 的索引来使用 at(index) 访问数组控件。就我而言,我在 ngFor 行中有 pointtIndex 。你也可以在你的函数中传递它。
myFormArray.at(pointtIndex).get('childFormControl').setValue('value');
如果您只想从组中获得价值,您可以使用
mainFormGroup.get('myFormGroupName').setValue('name');
或者
mainFormGroup.patchValue({ myFormGroupName: 'name'});
推荐阅读
- python-3.x - 在 aws ec2 上使用 Nginx、Gunicorn、django 无法访问站点
- python - 将字典转换为数据框时防止数字舍入
- flutter - 在 Flutter Web 中显示地图
- reactjs - 在 React js 中处理验证场景
- python - Python - Tkinter 管理框架
- javascript - 在 React 组件中显示自定义第三方 html 元素
- html - 如何使元素具有相对位置和绝对位置?
- r - 如何使用 R 中的 pdp 计算 3d 部分依赖图?
- python - 使用 subprocess.run 进行 GRPC ssl 脚本编写时遇到问题 [Python]
- python - .get_text() 在 BeautifulSoup 中不起作用