Angular: how to programmatically copy a value from one field to another?

Question

Another Angular question... I have the following component that I use in a parent (template-driven) form. (FWIW, I am using PrimeFaces UI components.) When the user clicks the "No" radio button, I would like to autopopulate the mailing address/city/state/ZIP fields from the corresponding fields above. This would be easy in plain JavaScript, but I want to do this in the proper Angular fashion. (I suspect my data binding is WAY improper...) Anyone have any ideas? Thanks in advance for your help!

Screen capture:

Component code:

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 {

  }
}

Template code (partial):

      <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

You can simply set your mailing values to the above values when the user sets the radion button value to yes ie true.

You can use the method that you're already using (onClick method) in the radio button for setting the values.

For example, it should look like this:

 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

It turns out my data binding (or lack thereof) WAS the issue. I enclosed the ngModel attribute in square brackets on the fields I wanted to copy, then referred to that value in the receiving field, ie:

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