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

<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>

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);
  }
}

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);
}