Angular 8-使用formControlName将计算值添加到formGroup中

基础概念

Angular 的 FormControlName 是一个指令，用于将表单控件绑定到 FormGroup 中的特定属性。FormGroup 是 Angular 表单模型的一部分，允许你将多个 FormControl 组织在一起，以便于管理和验证。

类型

FormControl：表示单个表单控件。
FormGroup：表示一组 FormControl。
FormArray：表示一组动态的 FormControl。

应用场景

适用于需要复杂表单验证和管理的场景，例如注册表单、登录表单、配置表单等。

示例代码

假设我们有一个简单的表单，其中包含一个计算字段。我们希望在用户输入两个数字后，自动计算它们的和。

HTML 部分

<form [formGroup]="myForm">
  <label for="number1">Number 1:</label>
  <input type="number" id="number1" formControlName="number1">

  <label for="number2">Number 2:</label>
  <input type="number" id="number2" formControlName="number2">

  <label for="sum">Sum:</label>
  <input type="text" id="sum" [formControl]="sumControl" readonly>
</form>

TypeScript 部分

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

@Component({
  selector: 'app-calculate-form',
  templateUrl: './calculate-form.component.html',
  styleUrls: ['./calculate-form.component.css']
})
export class CalculateFormComponent implements OnInit {
  myForm: FormGroup;
  sumControl: FormControl;

  constructor(private fb: FormBuilder) {
    this.sumControl = new FormControl('');
  }

  ngOnInit(): void {
    this.myForm = this.fb.group({
      number1: [''],
      number2: ['']
    });

    this.myForm.get('number1').valueChanges.subscribe(() => this.calculateSum());
    this.myForm.get('number2').valueChanges.subscribe(() => this.calculateSum());
  }

  calculateSum(): void {
    const number1 = this.myForm.get('number1').value;
    const number2 = this.myForm.get('number2').value;
    const sum = (number1 || 0) + (number2 || 0);
    this.sumControl.setValue(sum);
  }
}

遇到的问题及解决方法

问题：计算值没有实时更新

原因：可能是由于 valueChanges 订阅没有正确设置，或者计算逻辑有误。

解决方法：

确保 valueChanges 订阅正确设置。
检查计算逻辑，确保在每次输入变化时都能正确计算。

ngOnInit(): void {
  this.myForm = this.fb.group({
    number1: [''],
    number2: ['']
  });

  this.myForm.get('number1').valueChanges.subscribe(() => this.calculateSum());
  this.myForm.get('number2').valueChanges.subscribe(() => this.calculateSum());
}

calculateSum(): void {
  const number1 = parseFloat(this.myForm.get('number1').value);
  const number2 = parseFloat(this.myForm.get('number2').value);
  const sum = (isNaN(number1) ? 0 : number1) + (isNaN(number2) ? 0 : number2);
  this.sumControl.setValue(sum);
}