要向Angular 8的formGroup添加计算值,可以使用formControlName指令和自定义计算属性。
下面是一个示例代码,演示如何使用formControlName指令和自定义计算属性向formGroup添加计算值:
在HTML模板中,使用formGroup指令来创建一个表单组,并为每个表单控件使用formControlName指令:
在组件类中,创建一个formGroup,并在ngOnInit方法中为每个表单控件创建formControl对象:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-my-form',
templateUrl: './my-form.component.html',
styleUrls: ['./my-form.component.css']
})
export class MyFormComponent implements OnInit {
myForm: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.myForm = this.fb.group({
num1: ['', Validators.required],
num2: ['', Validators.required],
result: ['']
});
}
calculateResult(): number {
const num1 = this.myForm.get('num1').value;
const num2 = this.myForm.get('num2').value;
return num1 + num2;
}
}
在calculateResult方法中,我们从formGroup中获取num1和num2的值,并进行计算。然后,将计算结果返回给result表单控件。
请注意,我们在result表单控件上使用了[value]绑定,以便将计算结果显示在表单控件中。
这是一个简单的示例,演示了如何使用formControlName指令和自定义计算属性向formGroup添加计算值。根据实际需求,你可以根据自己的计算逻辑进行修改和调整。