Question

我有一个包含送货地址和帐单地址相关输入字段的表单，我有一个名为“与送货相同”的复选框。点击复选框后，应将送货地址中的字段值复制到帐单邮寄地址字段，并且帐单邮寄地址字段应注意送货地址中的更改。输入字段位于表单组中，输入具有formControlName。

以下是我的表格组

    this.customerForm = fb.group({
          'id': [],
          'company_code': ['', Validators.compose([Validators.required])],
          'company_name': ['', Validators.compose([Validators.required])],
          'is_important': false,
          'credit_term': [],
          'contacts': fb.array([
              this.initContacts(),
           ]),
          'shipping_addresses': fb.array([
              this.initShippingAddresses(),
           ]),
          'billing_addresses': fb.array([
              this.initBillingAddresses(),
           ])
        });

  initShippingAddresses() {
    return this.fb.group({
        'id': [''],
        'name': ['', Validators.compose([Validators.required])],
        'street_1': [],
        'street_2': [],
        'city': ['', Validators.compose([Validators.required])],
        'state': ['', Validators.compose([Validators.required])],
        'country': ['', Validators.compose([Validators.required])],
        'zip': ['', Validators.compose([Validators.required])],
        'is_residential': []
    });
  }

下面是我的功能，当点击“与发货相同”复选框时触发该功能

  updateCheckedOptions(key, event) {
    if(event.target.checked){
    }
    else{
    }
  }

Answer 1

试试这个：

 updateCheckedOptions(key, event) {
    if(event.target.checked){
      const shipping = this.customerForm.get('shipping_addresses');
      const billing = this.customerForm.get('billing_addresses');
      billing.setValue(shipping.value);
    }
    else{
    }
  }

更新

如果要更新这两个值，可以监听更改并在发生时更新表单组：

      // billing.setValue(shipping.value);
      billing.valueChanges.subscribe(value => shipping.value = value);

您可能需要稍微重构一下代码，因此每次检查“与发货相同”选项时都不会订阅。要点是使用setValue更新表单控件，使用valueChanges跟踪更改。

以angular2复制表单字段值

1 个答案:

更新