Angular Reactive Form -动态构建数组值(根据迭代隐藏和显示值)

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

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

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.myForm = this.fb.group({
      items: this.fb.array([])
    });
  }

  get items(): FormArray {
    return this.myForm.get('items') as FormArray;
  }

  addItem() {
    const item = this.fb.group({
      name: '',
      value: ''
    });
    this.items.push(item);
  }

  removeItem(index: number) {
    this.items.removeAt(index);
  }
}

<form [formGroup]="myForm">
  <div formArrayName="items">
    <div *ngFor="let item of items.controls; let i = index" [formGroupName]="i">
      <input formControlName="name" placeholder="Name">
      <input formControlName="value" placeholder="Value">
      <button (click)="removeItem(i)">Remove</button>
    </div>
  </div>
  <button (click)="addItem()">Add Item</button>
</form>