Question

我有一个名为demo的组件，它是一些i / p字段：
名字，姓氏，号码...... 以及这些字段是我动态添加两个字段（即添加多个地址）。

我能够发送所有表单字段值，但不能发送动态添加的值。

记录时，动态添加的字段值显示为undefined。由于该组件的代码很长，所以我要发布stackblitz DEMO。

Answer 1

由于地址类型是数组，因此您将无法轻松获得它，

  addFieldValue() {
   if (this.newAttribute.adr && this.newAttribute.city) {
     if (this.fieldArray.indexOf(this.newAttribute) === -1) {
    this.fieldArray.push(this.newAttribute)
    }
  }

   this.newAttribute = {};//see here
  }

实际上，您正在清空该值，因此该值将始终为0。

但是您已经将值放入了fieldArray中，可以通过对其进行迭代并获取值来轻松地检索数组值。

  public onAdd(): void {
    this.someContact = this.addForm.value;
    this.someContact.phoneNumbers = [];
    const phno: IPhoneNumber = {
      countryCode: this.addForm.value.counrtycode,
      number: this.addForm.value.phonenumber,
    };
    this.someContact.phoneNumbers.push(phno);

    this.someContact.addresses = [];
    this.fieldArray.forEach(a => {
      const addr: IPostalAddress = {
        addtype: a.adr,
        city: a.city,
      };
      this.someContact.addresses.push(addr);
    })


    console.log(this.someContact);
  }

我将type更改为addtype，命名不正确。

export interface IPostalAddress {
  addtype:            string;
  city:            string;
}

Demo

注意：由于您不处理表格，因此可以删除formControlName="adrType"

将动态添加的字段值与表单值一起添加到angular中

1 个答案: