Angular：如何以编程方式将值从一个字段复制到另一个字段？

Question

另一个 Angular 问题...我在父（模板驱动）表单中使用了以下组件。 （FWIW，我正在使用 PrimeFaces UI 组件。）当用户单击“否”单选按钮时，我想从上面的相应字段自动填充邮寄地址/城市/州/ZIP 字段。 这在普通 JavaScript 中很容易，但我想以正确的 Angular 方式进行。 （我怀疑我的数据绑定方式不正确......）有人有什么想法吗？ 在此先感谢您的帮助！

屏幕截图：

组件代码：

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 }] // used to link inputs to the parent form
})
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)">

Answer 1

当用户将单选按钮值设置为“是”即“真”时，您可以简单地将您的邮件值设置为上述值。

您可以使用单选按钮中已经使用的方法（onClick 方法）来设置值。

例如，它应该如下所示：

 handleRadioClick(str: string) {
    this.mailAddrDifferentFromPhysical = str;
    this.mailingCity = this.city;
    this.mailingAddress = this.address
    //and so on for the rest of the fields
 }

Answer 2

事实证明我的数据绑定（或缺乏数据绑定）是问题所在。 我将要复制的字段的ngModel属性括在方括号中，然后在接收字段中引用该值，即：

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