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

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

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

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

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

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

Dynamically add new fields on a click event?

javascript

typescript

angular-material

angular

angular-reactive-forms