Angular 11 ReactiveForm如何将form control转换为嵌套form array

TS 文件代码 #

首先确保组件顶部导入所需的响应式表单依赖：

import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';

组件内的表单定义和转换逻辑如下：

export class YourComponent {
  fieldForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    // 初始化原始表单，和你现有的定义一致
    this.fieldForm = this.formBuilder.group({
      fieldName: [null, Validators.required],
      displayName: [null, Validators.required],
      fieldType: [0, Validators.required],
      defaultValue: [null],
      fieldValues: [null],
      sortOrder: [null],
    });
  }

  // 按钮点击触发的转换方法
  convertDefaultValueToArray() {
    // 构造包含2个控件的FormArray，可根据需求调整初始值和验证规则
    const defaultValueFormArray = this.formBuilder.array([
      [null],
      [null]
    ]);
    // 直接替换原有的defaultValue控件
    this.fieldForm.setControl('defaultValue', defaultValueFormArray);
  }

  // 封装getter方便获取FormArray实例，HTML和后续逻辑调用更简洁
  get defaultValueArr(): FormArray {
    return this.fieldForm.get('defaultValue') as FormArray;
  }
}

HTML 文件代码 #

需要同时适配转换前的FormControl和转换后的FormArray两种渲染逻辑：

<!-- 触发转换的按钮 -->
<button type="button" (click)="convertDefaultValueToArray()">转换defaultValue为数组格式</button>

<form [formGroup]="fieldForm">
  <!-- 其他字段的表单代码保持你原有实现即可，此处仅展示defaultValue相关逻辑 -->
  <div>
    <label>默认值</label>
    <ng-container *ngIf="defaultValueArr instanceof FormArray; else singleControlTpl">
      <!-- 转换后渲染FormArray的多个输入框 -->
      <div formArrayName="defaultValue">
        <div *ngFor="let control of defaultValueArr.controls; let i = index">
          <input type="text" [formControlName]="i">
        </div>
      </div>
    </ng-container>
    <!-- 转换前的单个输入框模板 -->
    <ng-template #singleControlTpl>
      <input type="text" formControlName="defaultValue">
    </ng-template>
  </div>
</form>

如果后续需要对FormArray做控件增删操作，直接调用defaultValueArr.push()、defaultValueArr.removeAt()等内置方法即可。

内容的提问来源于stack exchange，提问作者Binh Hoang