Angular 动态控制表单字段显示/隐藏的一行代码解决方案

场景描述

在 Angular 项目中使用 @delon/form 时，我们经常需要根据某些条件动态控制表单字段的显示和隐藏。比如在审核注册信息时，只有当"单位类型"为"业委会"时才显示"物业项目"字段。

import { Component, ViewChild, inject } from '@angular/core';
import { SFComponent, SFSchema } from '@delon/form';
import { NzMessageService } from 'ng-zorro-antd/message';

@Component({
  selector: 'app-checkregister',
  template: `
    <nz-modal 
      [(nzVisible)]="isOpen" 
      nzTitle="审核信息"
      (nzOnCancel)="handleCancel()" 
      (nzOnOk)="handleOk()">
      <sf #Insuredsf [schema]="sfSchema" [formData]="formData"></sf>
    </nz-modal>
  `
})
export class CheckregisterComponent {
  @ViewChild('Insuredsf', { static: false }) Insuredsf!: SFComponent;
  
  private message = inject(NzMessageService);
  
  // 表单Schema定义
  sfSchema: SFSchema = {
    properties: {
      ywb006: { 
        type: 'string', 
        title: '单位类型', 
        readOnly: true, 
        ui: { grid: { span: 12 } } 
      },
      ywb012: {
        type: 'string', 
        title: '物业项目', 
        readOnly: true,
        ui: { grid: { span: 12 } }
      },

    },
    ui: {
      grid: { span: 24 },
      spanLabelFixed: 150
    }
  };

  formData: any = {};
  isOpen = false;

  /**
   * 打开审核模态框 - 一行代码控制字段显示隐藏
   */
  async doCheck(item: any) {
    this.formData = item;
    
    // 核心代码：一行控制显示隐藏
    (this.sfSchema.properties!['ywb012'].ui as any).hidden = item.ywb006 !== '业委会';
    this.isOpen = true;
    // 刷新表单确保变更生效
    setTimeout(() => this.Insuredsf?.refreshSchema());
  }

}```