如果选中了复选框，则使用其他字段值填充Angular 5填充表单字段 [英] angular 5 populate form fields using other field values if checkbox is selected

问题描述

我有两部分表格-通讯地址和居住地址.目标是如果选中复选框，则将值从一个字段复制/传递到另一个字段.请参见下面的用例

I've got two sections of forms - correspondence address and residential address. The goal is to copy/pass values from one field to another if a checkbox is checked. Kindly see below use case

• 如果选中了复选框(与居住地址相同)，则用住所地址表单字段的值填充对应地址字段
• 在选中复选框后，居住地址中的任何表单字段是否都应更改，请将更改实时传递给对应关系中的字段
  地址和
• 最后，如果未选中此复选框，则清除通讯地址中的表单值.以下是我尝试过的内容

• populate the correspondence address fields with the values of the residential address form fields iff a checkbox (same as residential address) is checked
• Should any form field in the residential address change after checking the checkbox, pass the change(s) realtime to the field in the correspondence
  address and
• lastly, clear the form values in the correspondence address if the checkbox is unchecked. Below is what i've tried

Component.ts

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

component.html

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

上面的代码不太符合预期，因为(i)取消选中复选框不会清除表单字段(ii)选中复选框后(如果住宅中的任何表单字段有任何更改)地址部分，对应表单字段不会更新以反映更改. N:B:这些字段在一个表单组中

The code above doesn't quite meet expectation as (i) unchecking the checkbox doesn't clear the form fields (ii) after checking the checkbox, if there's any change(s) in any of the form fields in the residential address section, the correspondence form fields doesn't update to reflect the changes. N:B: The fields are in one form group

请指导.

推荐答案

我简化了您的示例并使用:
-发送地址
-帐单邮寄地址

I've simplified a bit your example and used:
- sending address
- billing address

否则，我认为这几乎是相同的:)

Otherwise I think it's pretty much the same :)

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

Here's a working example on Stackblitz: https://stackblitz.com/edit/angular-nyjsnt

这篇关于如果选中了复选框，则使用其他字段值填充Angular 5填充表单字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！