Angular如何将FormControl A的Case1、Case2内容填充到FormControl B？

首先，你的两个文本框都绑定到了同一个FormControl A，所以它们的内容会自动同步。要实现将A的内容填充到评论字段B，可以通过监听A的值变化，同步更新B的值。

步骤1：组件类中监听FormControl变化 #

在组件代码中，我们需要获取对应的表单控件实例，监听A的valueChanges事件，并将值同步到B。同时要注意在组件销毁时取消订阅，避免内存泄漏。

import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit, OnDestroy {
  myForm: FormGroup;
  private destroy$ = new Subject<void>();

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    // 初始化表单
    this.myForm = this.fb.group({
      A: [''],
      B: ['']
    });

    const controlA = this.myForm.get('A');
    const controlB = this.myForm.get('B');

    // 监听A的内容变化，同步到B
    controlA?.valueChanges.pipe(
      takeUntil(this.destroy$) // 组件销毁时终止订阅
    ).subscribe(value => {
      if (value) {
        // 自定义内容格式，可根据需求调整
        controlB?.setValue(`Case1/Case2内容：\n${value}`, { emitEvent: false });
        // emitEvent: false 避免触发B的valueChanges循环
      } else {
        controlB?.setValue('', { emitEvent: false });
      }
    });
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

可选：如果Case1和Case2需要独立输入 #

如果你的实际需求是让Case1和Case2作为独立的输入框（而非绑定同一个FormControl），需要先修改模板中的formControlName：

<div class="col-sm-9">
   <mat-form-field class="example-full-width" appearance="outline">
   <mat-label> Case1 </mat-label>
     <textarea spellcheck="true" matInput placeholder="" formControlName="A1" cols="100"></textarea>
   </mat-form-field>
</div>

<div class="col-sm-9">
   <mat-form-field class="example-full-width" appearance="outline">
   <mat-label> Case2 </mat-label>
     <textarea spellcheck="true" matInput placeholder="" formControlName="A2" cols="100"></textarea>
   </mat-form-field>
</div>

然后在组件中合并两个控件的变化，将内容拼接后同步到B：

import { combineLatest } from 'rxjs';

// ...其他代码

ngOnInit(): void {
  this.myForm = this.fb.group({
    A1: [''],
    A2: [''],
    B: ['']
  });

  const controlA1 = this.myForm.get('A1');
  const controlA2 = this.myForm.get('A2');
  const controlB = this.myForm.get('B');

  // 合并两个控件的变化事件
  combineLatest([controlA1?.valueChanges, controlA2?.valueChanges]).pipe(
    takeUntil(this.destroy$)
  ).subscribe(([value1, value2]) => {
    let commentContent = '';
    if (value1) commentContent += `Case1内容：\n${value1}\n\n`;
    if (value2) commentContent += `Case2内容：\n${value2}`;
    controlB?.setValue(commentContent.trim(), { emitEvent: false });
  });
}

内容的提问来源于stack exchange，提问作者NewBond007