Question

这是我的FormGroup：

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 =“ productGroup.controls ['variants']。controls的项目；让i =索引；”

你应该没事。

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

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

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

2 个答案: