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

问题描述

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

• 如果选中复选框(与住宅地址相同)，则使用住宅地址表单字段的值填充通信地址字段
• 如果选中复选框后住址中的任何表单字段发生更改，请实时将更改传递到对应字段中
  地址和
• 最后，如果未选中复选框，则清除通信地址中的表单值.以下是我尝试过的

<块引用>

组件.ts

populateCorrespondenceAdd(event) {//console.log(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">与住宅地址相同?)</mat-checkbox>

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

请指导.

解决方案

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

否则我认为它几乎相同:)

TS

import { Component, OnInit } from '@angular/core';从'@angular/forms' 导入 { FormBuilder, FormGroup, FormControl };从'rxjs'导入{空}；import { tap, distinctUntilChanged, switchMap, startWith } from 'rxjs/operators';接口地址{街道:字符串；城市:字符串；国家:字符串；}@成分({选择器:'我的应用'，templateUrl: './app.component.html',styleUrls: ['./app.component.css']})导出类 AppComponent 实现 OnInit {public isSameAddressControl: FormControl = new FormControl(false);公共地址:FormGroup = this.fb.group({发送地址:this.fb.group({街道: ''，城市: ''，国家: ''}),billingAddress: this.fb.group({街道: ''，城市: ''，国家: ''})});构造函数(私人FB:FormBuilder){}ngOnInit() {this.isSameAddressControl.valueChanges.管道(distinctUntilChanged(),switchMap(isSameAddress => {如果(isSameAddress){返回 this.addresses.get('发送地址').valueChanges.管道(//在开始时用当前值填充表单startWith(this.addresses.get('sendingAddress').value),点击(值=>//每次发送地址改变时，更新账单地址这个地址.get('账单地址').setValue(值)))} 别的 {这个地址.get('账单地址').重启();返回空；}})//不要忘记在组件销毁时取消订阅).订阅();}}

HTML

发送/账单地址相同<form [formGroup]="地址"><ng-container formGroupName="sendingAddress">发送地址
<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-容器><ng-container formGroupName="billingAddress">帐单地址
<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-容器></表单>

这是一个关于 Stackblitz 的工作示例:https://stackblitz.com/edit/angular-nyjsnt

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

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>

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

Kindly guide.

解决方案

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>

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

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