根据angular中的下拉列表启用或禁用formarray

基础概念

在Angular中，FormArray 是 FormGroup 的一部分，用于处理动态数组形式的表单控件。它允许你添加、删除或修改数组中的表单项。结合下拉列表（select），你可以根据下拉列表的选项来启用或禁用 FormArray 中的某些控件。

类型与应用场景

类型：主要涉及到 FormArray、FormGroup、FormControl 以及下拉列表控件。
应用场景：适用于需要动态添加、删除或修改表单项的场景，例如创建具有多个可选部分的复杂表单。

示例代码

以下是一个简单的示例，展示如何根据下拉列表的值来启用或禁用 FormArray 中的控件：

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

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

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.form = this.fb.group({
      options: this.fb.array([
        this.fb.group({
          optionName: [''],
          isEnabled: [false]
        })
      ]),
      selectControl: ['']
    });

    this.form.get('selectControl').valueChanges.subscribe(value => {
      const control = (this.form.get('options') as FormArray).controls;
      control.forEach(c => {
        c.get('isEnabled').setValue(value === 'enable');
      });
    });
  }

  get options() {
    return this.form.get('options') as FormArray;
  }
}

<!-- dynamic-form.component.html -->
<form [formGroup]="form">
  <select formControlName="selectControl">
    <option value="">请选择</option>
    <option value="enable">启用</option>
    <option value="disable">禁用</option>
  </select>

  <div formArrayName="options">
    <div *ngFor="let option of options.controls; let i = index" [formGroupName]="i">
      <input formControlName="optionName" placeholder="选项名称">
      <input formControlName="isEnabled" type="checkbox">
    </div>
  </div>
</form>