Angular如何规范实现物理地址字段值自动填充至邮寄地址字段？

我在父级模板驱动表单中使用子组件（基于PrimeFaces UI组件），需求是：当用户点击「No」单选按钮（表示邮寄地址与物理地址相同）时，自动将上方的物理地址、城市、州、ZIP字段的值填充到邮寄地址的对应字段中。原生JavaScript实现很简单，但想采用Angular的规范方式实现，当前的数据绑定方式存在问题，求解决方案。

表单布局说明：包含物理地址输入区域（地址、城市、州、ZIP字段）、单选按钮组（选项为「Yes」「No」，用于选择邮寄地址是否与物理地址不同），以及邮寄地址输入区域（对应地址、城市、州、ZIP字段）。

当前组件代码 #

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { DropdownOptions } from 'src/assets/dropdownOptions';
import { ApplicantInformation } from 'src/app/_models/applicantInformation.model';
import { ControlContainer, NgForm } from '@angular/forms';

@Component({
  selector: "app-applicant-information",
  templateUrl: "./applicant-information.component.html",
  styleUrls: "./applicant-information.component.css",
  viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] // 用于关联到父表单
})
export class ApplicantInformationComponent implements OnInit {
  name: string = '';
  phone = '';
  address = '';
  city = '';
  state = 'AL';
  zipCode = '';
  mailAddrDifferentFromPhysical: string = 'false';
  mailingAddress = '';
  mailingCity = '';
  mailingState = 'AL';
  mailingZIPCode = '';

  options: any = new DropdownOptions;
  sts: string[] = [];

  @Input() ngModel: any = new ApplicantInformation(
    this.name,
    this.phone,
    this.address,
    this.city,
    this.state,
    this.zipCode,
    this.mailAddrDifferentFromPhysical,
    this.mailingAddress,
    this.mailingCity,
    this.mailingState,
    this.mailingZIPCode,
  )

  @Output() nameEvent: EventEmitter<any> = new EventEmitter();

  onFirstColEntered(name: any) {
    this.nameEvent.emit(name);
  }

  handleRadioClick(str: string) {
    this.mailAddrDifferentFromPhysical = str;
  }

  constructor() {
    this.sts = this.options.strAbbrs;
  }
  ngOnInit(): void {

  }
}

当前模板代码（关键部分） #

<label for="address">Address</label>
<input type="text"
  pInputText
  name="address" id="address"
  [ngModel] #address="ngModel"
  required [minlength]="8" [ngModelOptions]="{ updateOn: 'blur' }" trim="blur"
  placeholder="Address"
  (change)="onFirstColEntered(address)">

...

<p class="lg:col-12 md:col-12">
  My mailing address is different than the one above. &nbsp;
  <p-radioButton
    name="mailAddrDifferentFromPhysical" inputId="mailAddrDifferentFromPhysical"
    value="true"
    label="Yes"
    ngModel
    (onClick)="handleRadioClick('true');onFirstColEntered(mailAddrDifferentFromPhysical)"></p-radioButton>
  <p-radioButton
    name="mailAddrDifferentFromPhysical"
    value="false"
    label="No"
    ngModel
    (onClick)="handleRadioClick('false');onFirstColEntered(mailAddrDifferentFromPhysical)"></p-radioButton>
</p>

...

<label for="mailingAddress">Mailing Address</label>
<input type="text"
  pInputText
  name="mailingAddress" id="mailingAddress"
  (ngModel)="address?.value" #mailingAddress="ngModel"
  required [minlength]="8" [ngModelOptions]="{ updateOn: 'blur' }" trim="blur"
  placeholder="Mailing Address"
  (change)="onFirstColEntered(mailingAddress)">

规范解决方案 #

1. 统一数据模型，消除冗余变量 #

当前代码中同时存在独立变量和@Input() ngModel，导致数据分散、绑定混乱。应直接基于ApplicantInformation模型做双向绑定，确保数据单一来源。

修改后的组件代码：

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { DropdownOptions } from 'src/assets/dropdownOptions';
import { ApplicantInformation } from 'src/app/_models/applicantInformation.model';
import { ControlContainer, NgForm } from '@angular/forms';

@Component({
  selector: "app-applicant-information",
  templateUrl: "./applicant-information.component.html",
  styleUrls: "./applicant-information.component.css",
  viewProviders: [{ provide: ControlContainer, useExisting: NgForm }]
})
export class ApplicantInformationComponent implements OnInit {
  options: any = new DropdownOptions;
  sts: string[] = [];

  // 使用明确命名的输入属性，避免与ngModel内置指令冲突
  @Input() applicantInfo: ApplicantInformation = new ApplicantInformation();
  // 输出Change事件，遵循Angular双向绑定规范
  @Output() applicantInfoChange: EventEmitter<ApplicantInformation> = new EventEmitter();

  constructor() {
    this.sts = this.options.strAbbrs;
  }

  ngOnInit(): void {
    // 初始化时默认同步地址（如果未设置邮寄地址不同）
    if (this.applicantInfo.mailAddrDifferentFromPhysical === 'false') {
      this.syncAddresses();
    }
  }

  // 封装地址同步逻辑
  syncAddresses(): void {
    this.applicantInfo.mailingAddress = this.applicantInfo.address;
    this.applicantInfo.mailingCity = this.applicantInfo.city;
    this.applicantInfo.mailingState = this.applicantInfo.state;
    this.applicantInfo.mailingZIPCode = this.applicantInfo.zipCode;
    // 通知父组件数据更新
    this.applicantInfoChange.emit(this.applicantInfo);
  }

  // 处理单选按钮值变化
  onMailAddrChange(isDifferent: string): void {
    this.applicantInfo.mailAddrDifferentFromPhysical = isDifferent;
    // 选择「No」时同步地址
    if (isDifferent === 'false') {
      this.syncAddresses();
    }
    this.applicantInfoChange.emit(this.applicantInfo);
  }

  onFirstColEntered(value: any) {
    // 根据需求通知父组件数据变化
    this.applicantInfoChange.emit(this.applicantInfo);
  }
}

2. 修正模板绑定逻辑，使用标准双向绑定 #

去掉局部变量引用，改用[(ngModel)]绑定到applicantInfo属性，同时用onChange事件替代onClick，确保值变化时才触发逻辑。

修改后的模板关键部分：

<!-- 物理地址字段 -->
<label for="address">Address</label>
<input type="text"
       pInputText
       name="address" id="address"
       [(ngModel)]="applicantInfo.address"
       required [minlength]="8" [ngModelOptions]="{ updateOn: 'blur' }" trim="blur"
       placeholder="Address"
       (change)="onFirstColEntered(applicantInfo.address)">

<!-- 城市、州、ZIP字段同理，绑定到applicantInfo对应属性 -->
<!-- ... -->

<!-- 单选按钮组 -->
<p class="lg:col-12 md:col-12">
  My mailing address is different than the one above. &nbsp;
  <p-radioButton
    name="mailAddrDifferentFromPhysical" inputId="mailAddr-different-yes"
    value="true"
    label="Yes"
    [(ngModel)]="applicantInfo.mailAddrDifferentFromPhysical"
    (onChange)="onMailAddrChange($event.value)"></p-radioButton>
  <p-radioButton
    name="mailAddrDifferentFromPhysical" inputId="mailAddr-different-no"
    value="false"
    label="No"
    [(ngModel)]="applicantInfo.mailAddrDifferentFromPhysical"
    (onChange)="onMailAddrChange($event.value)"></p-radioButton>
</p>

<!-- 邮寄地址字段 -->
<label for="mailingAddress">Mailing Address</label>
<input type="text"
       pInputText
       name="mailingAddress" id="mailingAddress"
       [(ngModel)]="applicantInfo.mailingAddress"
       required [minlength]="8" [ngModelOptions]="{ updateOn: 'blur' }" trim="blur"
       placeholder="Mailing Address"
       (change)="onFirstColEntered(applicantInfo.mailingAddress)">

<!-- 邮寄城市、州、ZIP字段同理，绑定到applicantInfo对应属性 -->
<!-- ... -->

3. 核心优化点说明 #

• 数据单一来源：所有字段绑定到同一个applicantInfo模型，避免数据不一致。
• 标准双向绑定：[(ngModel)]是Angular模板驱动表单的规范方式，自动同步视图与模型。
• 事件选择更准确：使用单选按钮的onChange事件，而非onClick，确保只有值变化时才触发逻辑。
• 逻辑封装复用：syncAddresses()方法统一处理地址同步，便于后续修改和维护。
• 规范组件通信：通过@Input()和@Output() xxxChange实现父子组件数据同步，符合Angular组件设计规范。

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