首页
学习
活动
专区
圈层
工具
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何向formGroup添加formArray?

在Angular中,可以通过以下步骤向FormGroup添加FormArray

  1. 创建一个新的FormArray对象。
  2. 使用addControl方法将FormArray添加到FormGroup中。

下面是一个完整的示例代码:

代码语言:txt
复制
import { Component } from '@angular/core';
import { FormGroup, FormBuilder, FormArray } from '@angular/forms';

@Component({
  selector: 'app-example',
  template: `
    <form [formGroup]="myForm">
      <div formArrayName="myArray">
        <div *ngFor="let control of myForm.get('myArray').controls; let i = index">
          <input [formControlName]="i">
        </div>
      </div>
    </form>
  `
})
export class ExampleComponent {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      myArray: this.fb.array([])  // 创建一个空的FormArray
    });
  }

  addControl() {
    const control = this.fb.control('');  // 创建一个新的FormControl
    this.myForm.get('myArray').push(control);  // 将FormControl添加到FormArray中
  }
}

在上面的示例中,我们使用FormBuilder创建了一个名为myArray的空FormArray,然后将其添加到FormGroup中。接下来,我们在模板中使用formArrayName指令将FormArray与HTML中的元素关联起来,并使用*ngFor指令遍历FormArray中的每个控件,并使用formControlName指令将控件与input元素关联起来。

你可以通过调用addControl方法来动态添加新的控件。每次调用addControl方法时,都会创建一个新的FormControl对象,并将其添加到FormArray中。这样,每次点击添加按钮时,就会在界面上动态添加一个新的输入框。

关于formArray的更多详细信息,你可以参考腾讯云的文档

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的文章

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券