угловые 5 заполняют поля формы, используя другие значения полей, если установлен флажок

Question

У меня есть два раздела форм - почтовый адрес и адрес проживания.Цель состоит в том, чтобы скопировать / передать значения из одного поля в другое, если установлен флажок.Пожалуйста, см. Ниже сценарий использования

• заполнить поля адреса корреспонденции значениями полей формы адреса места жительства, если установлен флажок (такой же, как адрес места жительства)
• Если какое-либо поле формы визмените адрес проживания после того, как установите флажок, передайте в реальном времени изменение (я) в поле в адресе корреспонденции
  и
• и, наконец, очистите значения формы в адресе корреспонденции, если флажок не установлен.Ниже я попробовал

Component.ts

populateCorrespondenceAdd(event) {
    //console.log(event.checked)
    if (event.checked) {
        [...]
        this.correspondenceHouseNumber = 
        this.residentialHouseNumber;
        this.correspondenceStreetName = 
        this.enrollee.residentialStreetName;
        this.enrollee.correspondenceLGA = 
        this.enrollee.residentialLGA;
        [...]
    }
}

component.html

<mat-checkbox [(ngModel)]="populateCorrespondenceaddress" (change)="populateCorrespondenceAdd($event)"
                formControlName="populateCorrespondenceadd" value="true">Same as residential address?)</mat-checkbox>

Приведенный выше код не совсем соответствует ожиданиям, так как (i) снятие флажка не очищает поля формы (ii) после установки флажка, если есть какие-либо изменения в любом из полей формы в адресе проживанияраздел, поля формы корреспонденции не обновляются, чтобы отразить изменения. N: B: поля находятся в одной группе форм

Пожалуйста, руководство.

Answer 1

Я немного упростил ваш пример и использовал:
- адрес для отправки
- адрес для выставления счета

В остальном я думаю, что это почти то же самое:)

TS

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormControl } from '@angular/forms';
import { EMPTY } from 'rxjs';
import { tap, distinctUntilChanged, switchMap, startWith } from 'rxjs/operators';

interface Address {
  street: string;
  city: string;
  country: string;
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  public isSameAddressControl: FormControl = new FormControl(false);

  public addresses: FormGroup = this.fb.group({
    sendingAddress: this.fb.group({
      street: '',
      city: '',
      country: ''
    }),
    billingAddress: this.fb.group({
      street: '',
      city: '',
      country: ''
    })
  });

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.isSameAddressControl
      .valueChanges
      .pipe(
        distinctUntilChanged(),
        switchMap(isSameAddress => {
          if (isSameAddress) {
            return this.addresses
              .get('sendingAddress')
              .valueChanges
              .pipe(
                // at the beginning fill the form with the current values
                startWith(this.addresses.get('sendingAddress').value),
                tap(value =>
                  // every time the sending address changes, update the billing address 
                  this.addresses
                    .get('billingAddress')
                    .setValue(value)
                )
              )
          } else {
            this.addresses
              .get('billingAddress')
              .reset();

            return EMPTY;
          }
        })
        // don't forget to unsubscribe when component's destroyed
      )
      .subscribe();
  }
}

HTML

<input type="checkbox" [formControl]="isSameAddressControl"> Same address for sending/billing

<form [formGroup]="addresses">
  <ng-container formGroupName="sendingAddress">
    Sending address<br>
    <input type="text" formControlName="street" placeholder="Street" autocomplete="off"><br>
    <input type="text" formControlName="city" placeholder="City" autocomplete="off"><br>
    <input type="text" formControlName="country" placeholder="Country" autocomplete="off"><br>
  </ng-container>

  <ng-container formGroupName="billingAddress">
    Billing address<br>
    <input type="text" formControlName="street" placeholder="Street" autocomplete="off"><br>
    <input type="text" formControlName="city" placeholder="City" autocomplete="off"><br>
    <input type="text" formControlName="country" placeholder="Country" autocomplete="off"><br>
  </ng-container>
</form>

Вот рабочий пример Stackblitz: https://stackblitz.com/edit/angular-nyjsnt