在点击事件上动态添加新字段？

Question

这是我的表单组：

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: ''
    })
  ])
});

用户单击按钮后，我需要动态添加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>

如何让它发挥作用？

Answer 1

我不知道你想要达到什么目标，但我想我遇到了你的问题。

以下代码：

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;"

你应该没事的。

Answer 2

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

EX：我有一个如下所示的 customerForm

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(): void {
   this.addresses.push(this.createAddress());
  }

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

在您看来，您可以遍历此地址数组并显示地址。最初它不会显示，因为数组值将为空！希望对您有所帮助。