Angular FormArray 的用法

最新推荐文章于 2024-07-28 19:30:25 发布

莫名无言

最新推荐文章于 2024-07-28 19:30:25 发布

阅读量7.5k

点赞数 2

分类专栏： Angular4 文章标签： angular

本文链接：https://blog.csdn.net/u011763994/article/details/78682576

版权

Angular4 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Angular FormArray 的用法

要注意的几点:

FormArray 需要在FormGroup 内部.

    this.groupForm = this.fb.group({
      Arr: this.fb.array([]) // formarray
    });

定义一个formgroup, 存放你需要做循环的form. 也便于后面的添加删除表单序列.

// formarray表单
    this.groupForm = this.fb.group({
      Arr: this.fb.array([this.createForm()]) // formarray
    });
private createForm() {
  return  this.fb.group({
          control1:  ['', Validators.required],
          control2:  ['', Validators.required],
	          Name:  ['', Validators.required],
	          Code:  ['', Validators.required],
		     Level:  ['', Validators.required],
	        Remark:  [''],
        });
}

添加和移除表单

// 增加表单
  newForm() {
    const arr = this.groupForm.get('Arr') as FormArray;
    arr.push(this.createForm()); // 推送form新表单
  }

// 移除表单
  removeForm(i: number) {
    const arr = this.groupForm.get('Arr') as FormArray;
    arr.removeAt(i); // 根据索引移除对应的表单
  }

前台展示方法.

<form [formGroup]="groupForm" id="detail" class="am-g">

    <div formArrayName="Arr">
        <div *ngFor="let form of ArrForm; let i=index;">
        <ng-container [formGroupName] = "i">
        <input type="text" formControlName="Name">
        ...............
        </ng-container>
        <!-- 增加移除表单 -->
		<button (click)="newForm()">增加表单</button>
		<button (click)="removeForm(i)">增加表单</button>
    </div>

formArray 给特定数组参数赋值:
this.ArrForm.at(i).patchValue({‘HospitalId’: value});