Angular中基于FormGroup复选框状态控制表单输入的显隐与启用

我会帮你用Angular的最佳实践实现需求，尽量避免原生DOM操作，用响应式表单和属性绑定来处理状态变化，同时确保输入值持久保留。

步骤1：重构组件类逻辑 #

我们用Angular的FormBuilder创建响应式表单，监听复选框状态变化，以此控制模态框和输入框的状态：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  f1FormGroup: FormGroup;
  i1mFormGroup: FormGroup;
  showModal: boolean = false;
  isI2Checked: boolean = false;

  constructor(private fb: FormBuilder) { }

  ngOnInit(): void {
    // 初始化选项表单组
    this.f1FormGroup = this.fb.group({
      i1: [false],
      i2: [false]
    });

    // 初始化模态框表单组，用于持久化输入值
    this.i1mFormGroup = this.fb.group({
      m1: [''],
      tc: [''],
      m2: ['']
    });

    // 监听i1复选框变化
    this.f1FormGroup.get('i1')?.valueChanges.subscribe(isChecked => {
      if (isChecked) {
        this.showModal = true;
        this.isI2Checked = false;
        // 自动取消i2的勾选，避免状态冲突
        this.f1FormGroup.get('i2')?.setValue(false);
      } else if (!this.f1FormGroup.get('i2')?.value) {
        this.showModal = false;
      }
    });

    // 监听i2复选框变化
    this.f1FormGroup.get('i2')?.valueChanges.subscribe(isChecked => {
      if (isChecked) {
        this.showModal = true;
        this.isI2Checked = true;
        // 自动取消i1的勾选，避免状态冲突
        this.f1FormGroup.get('i1')?.setValue(false);
      } else if (!this.f1FormGroup.get('i1')?.value) {
        this.showModal = false;
      }
    });
  }

  close1(): void {
    this.showModal = false;
    // 关闭模态框时重置复选框状态
    this.f1FormGroup.reset({ i1: false, i2: false });
  }

  save1(): void {
    // 这里可以处理表单保存逻辑，比如提交到后端
    console.log('模态框表单值:', this.i1mFormGroup.value);
    this.showModal = false;
    this.f1FormGroup.reset({ i1: false, i2: false });
  }
}

步骤2：更新模板代码 #

修改模板，用响应式表单绑定替代ngModel，用*ngIf和属性绑定控制元素显示/状态：

FormGroup1 模板：

<div class="list">
  <form [formGroup]="f1FormGroup">
    <h2>Options</h2>
    <h5>
      <input type="checkbox" formControlName="i1"> i1
    </h5>
    <h5>
      <input type="checkbox" formControlName="i2"> i2
    </h5>
  </form>
</div>

FormGroup2（模态框）模板：

<div id="i1m" class="modal" *ngIf="showModal">
  <div class="col-sm-5">
    <span class="close" (click)="close1()">&times;</span>
    <h2>RV</h2>
    <form class="st" [formGroup]="i1mFormGroup">
      <h6>Material</h6>
      <input type="text" id="m1" placeholder="Optional" formControlName="m1">
      
      <h6>TC</h6>
      <select formControlName="tc" matNativeControl required>
        <option value="1">C</option>
        <option value="2">H</option>
        <option value="3">S</option> <!-- 修正原代码重复的value=2问题 -->
      </select>

      <!-- 只有勾选i2时才显示SH输入框 -->
      <h6 *ngIf="isI2Checked">SH</h6>
      <input 
        type="text" 
        id="m2" 
        placeholder="1" 
        formControlName="m2"
        *ngIf="isI2Checked" 
        [disabled]="!isI2Checked"
      >

      <button mat-button type="submit" (click)="save1()">Save</button>
    </form>
  </div>
</div>

关键说明 #

• 响应式表单优势：用FormGroup和valueChanges监听状态变化，替代原生document.getElementById，更符合Angular的组件化数据流，也更容易维护。
• 输入值持久化：i1mFormGroup会自动保存所有输入框的值，切换复选框时不会丢失已输入的内容。
• 状态冲突处理：勾选i1时自动取消i2的勾选，反之亦然，避免同时显示两种状态的冲突。
• 元素状态控制：用*ngIf控制m2输入框的显示，用[disabled]控制启用状态，完全通过Angular绑定实现，无需操作DOM。

内容的提问来源于stack exchange，提问作者ram kris