Javascript 是否在单击事件上动态添加新字段？

这是我的表格组：

this.productGroup = this.fb.group({
  name: ['', Validators.compose([Validators.required, Validators.maxLength(80)])],
  desc: ['', Validators.maxLength(3000)],
  category: ['', Validators.required]
  variants: this.fb.array([
    this.fb.group({
      type: '',
      options: ''
    })
  ])
});

我需要在用户单击按钮后手动添加

类型

和

选项

控制字段。用户输入后，FormArray应如下所示：

[{type:'size'，options:'Small'，'Big'}，{type:'color'，options:'red'，'blue'，'yellow'}，…]

以下是我想做的：

// Add new item to FormArray
addItem(): void {
  this.variantsArray = this.productGroup.get('variants') as FormArray;
  this.variantsArray.push(this.fb.group({
    type: '',
    options: ''
  }));
}

// Template
<form [formGroup]="productGroup">
  // inputs...
  <div formArrayName="variants" *ngFor="let item of productGroup.controls['variants']; let i = index;">
      <div [formGroupName]="i">
        <div class="row">
          <mat-form-field class="col-12">
            <input formControlName="type">
          </mat-form-field>
        </div>
        <div class="row">
          <mat-form-field class="col-12">
            <input formControlName="options">
          </mat-form-field>
        </div>
      </div>
      <div class="row">
        <a href="javascript:" (click)="addItem()"> Adicionar Variante </a>
        <a href="javascript:" (click)="removeItem(i)" *ngIf="i > 0"> Remover Variante </a>
      </div>
    </div>
</form>

//将新项目添加到FormArray
addItem（）：void{
this.variantsArray=this.productGroup.get（'variants'）作为FormArray；
this.variantsArray.push（this.fb.group({
类型：“”，
选项：“”
}));
}
//模板
//输入。。。

---

如何让它发挥作用？

我不知道你到底想要实现什么，但我想我已经解决了你的问题

以下代码：

variants: this.fb.array([
    this.fb.group({
      type: '',
      options: ''
    })
  ])

不会生成数组，因此无法使用

*ngFor

对其进行迭代

如果你再深入一点，你会发现

productGroup.controls['variants']

具有控件的属性

因此，只需将

*ngFor

更改为：

*ngFor="let item of productGroup.controls['variants'].controls; let i = index;"

---

您应该很好。

要在被动表单中动态添加formElemnt，您需要首先创建表单元素或表单组，并将其推送到该字段的原始formarry中

例句：我有一个像下面这样的客户

this.customerForm = this.fb.group({
  firstName: ['', [Validators.required, Validators.minLength(3)]],
  lastName: ['', [Validators.required, Validators.maxLength(50)]],
  emailGroup: this.fb.group({
    email: ['', [Validators.required, Validators.email]],
    confirmEmail: ['', Validators.required],
  }, { validator: emailMatcher }),
  phone: ''
  addresses: this.fb.array([this.createAddress()])
});

单击视图中的addaddress，我可以调用组件中的一个函数，该函数将把一个新地址推送到表单中的addresses数组中

  addAddress(): void {
   this.addresses.push(this.createAddress());
  }

 createAddress(): FormGroup {
   return this.fb.group({
      street1: ['', Validators.required],
      street2: '',
      city: '',
      state: '',
      zip: ''
   });
 }

---

在您的视图中，您可以迭代此地址数组并显示地址。最初它不会显示，因为数组值为空！希望有帮助。

如何存储所示的数据{type:'size'，options:'Small'，'Big'}这甚至不是一个有效的javascript对象，比如属性

options:'Small'，'Big'

。任何一个选项属性都应该是数组，否则您将获得长字符串。我将使用字符串数组将数据直接传递到组件上的FormControl。更准确地说，我使用

MatChipInput

将值传递给这个字符串数组。我正在尝试为输入获取一个通用的工作解决方案，以便在我的代码上实现。谢谢<代码>角度语言服务扩展无法正确加载表单组的某些属性。另外，假设我将字符串数组直接传递给

选项

（我使用一些“芯片”来添加字符串）。。。如何确保将字符串数组添加到正确的表单数组索引？如果有人可以帮助我。。。提出了一个新问题：如果您的FormArray中没有任何FormGroup怎么办？例如

地址：this.fb.array（[]）

并且您希望传递

['string1'，'string2']

内部在这种情况下，您可以使用新的FormControl（）在表单上创建新控件：例如：this.customerForm.addControl（'newControl'，new FormControl（''，Validators.required））；您能在这里看一下吗？和。我正在尝试类似的方法将这些控件添加到特定的嵌套表单组（组->动态数组->组->数组）：

this.productGroup.controls['variants']['options'].push（新表单控件（类型））；

this.productGroup=this.fb.group（{name:''，变体：this.fb.array（[this.fb.group（{type:''，options:this.fb.array（[]）））}）