要解决"Angular 7响应式表单数组 - 计算表单值"的问题,可以按照以下步骤进行操作。
首先,创建一个响应式表单,其中包含一个表单数组。在组件的HTML模板中,使用formArrayName
指令来指定表单数组的名称,并使用formGroupName
指令来指定每个数组项的名称。
接下来,在组件类中,创建一个myForm
属性,并使用FormBuilder
来构建表单。在calculate
方法中,遍历表单数组的每个控件,并将其值相加,然后将结果赋给total
属性。
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent {
myForm: FormGroup;
total: number = 0;
constructor(private fb: FormBuilder) {
this.myForm = this.fb.group({
myArray: this.fb.array([])
});
}
calculate() {
this.total = 0;
const controlArray = this.myForm.get('myArray') as FormArray;
controlArray.controls.forEach(control => {
this.total += control.get('value').value;
});
}
}
现在,每当点击"计算"按钮时,calculate
方法会遍历表单数组的每个控件,并将其值相加。结果将显示在模板中的总和标签中。
注意:上述代码中的myForm
属性和total
属性可以根据实际需求进行调整。