在反应式表单中手动设置表单数组元素的值

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormArray } from '@angular/forms';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  myForm: FormGroup;

  constructor() { }

  ngOnInit() {
    this.myForm = new FormGroup({
      arrayControl: new FormArray([])
    });
  }
}

<form [formGroup]="myForm">
  <div formArrayName="arrayControl">
    <div *ngFor="let item of myForm.get('arrayControl').controls; let i = index">
      <input type="text" [formControlName]="i">
    </div>
  </div>
</form>

// 获取表单数组控件
get arrayControl() {
  return this.myForm.get('arrayControl') as FormArray;
}

// 添加表单数组元素
addItem() {
  this.arrayControl.push(new FormControl(''));
}

// 设置表单数组元素的值
setArrayValue(index: number, value: any) {
  this.arrayControl.at(index).setValue(value);
}