feat(form): add hide property (#1516)

Author: cipchk

packages/form/src/schema/index.ts

@@ -36,6 +36,13 @@ export interface SFSchemaEnum {
    */
   group?: boolean;
 
+  /**
+   * Whether to hide item
+   *
+   * 是否隐藏项
+   */
+  hide?: boolean;
+
   isLeaf?: boolean;
 
   /** 组对应的子类 */

packages/form/src/widgets/select/demo/simple.md

@@ -15,16 +15,17 @@ Simplest of usage.
 
 ```ts
 import { Component, ViewChild } from '@angular/core';
+import { of, delay } from 'rxjs';
+
 import { SFComponent, SFSchema, SFSelectWidgetSchema } from '@delon/form';
 import { NzMessageService } from 'ng-zorro-antd/message';
-import { of, delay } from 'rxjs';
 
 @Component({
   selector: 'app-demo',
   template: `
     <sf #sf [schema]="schema" (formSubmit)="submit($event)"></sf>
     <button nz-button (click)="updateStatus()">Update Status</button>
-  `,
+  `
 })
 export class DemoComponent {
   @ViewChild('sf', { static: false }) private sf!: SFComponent;
@@ -36,13 +37,13 @@ export class DemoComponent {
         enum: [
           { label: '待支付', value: 'WAIT_BUYER_PAY', otherData: 1 },
           { label: '已支付', value: 'TRADE_SUCCESS' },
-          { label: '交易完成', value: 'TRADE_FINISHED' },
+          { label: '交易完成', value: 'TRADE_FINISHED' }
         ],
         default: 'WAIT_BUYER_PAY',
         ui: {
           widget: 'select',
-          change: (value, orgData) => console.log(value, orgData),
-        } as SFSelectWidgetSchema,
+          change: (value, orgData) => console.log(value, orgData)
+        } as SFSelectWidgetSchema
       },
       // 标签
       tags: {
@@ -51,13 +52,13 @@ export class DemoComponent {
         enum: [
           { label: '待支付', value: 'WAIT_BUYER_PAY' },
           { label: '已支付', value: 'TRADE_SUCCESS' },
-          { label: '交易完成', value: 'TRADE_FINISHED' },
+          { label: '交易完成', value: 'TRADE_FINISHED' }
         ],
         ui: {
           widget: 'select',
-          mode: 'tags',
+          mode: 'tags'
         } as SFSelectWidgetSchema,
-        default: null,
+        default: null
       },
       // 异步数据
       async: {
@@ -74,13 +75,23 @@ export class DemoComponent {
                 children: [
                   { label: '待支付', value: 'WAIT_BUYER_PAY' },
                   { label: '已支付', value: 'TRADE_SUCCESS' },
-                  { label: '交易完成', value: 'TRADE_FINISHED' },
-                ],
-              },
-            ]).pipe(delay(1200)),
-        } as SFSelectWidgetSchema,
+                  { label: '交易完成', value: 'TRADE_FINISHED' }
+                ]
+              }
+            ]).pipe(delay(1200))
+        } as SFSelectWidgetSchema
       },
-    },
+      hide: {
+        type: 'string',
+        title: '隐藏项',
+        enum: [
+          { label: '第1个', value: 1 },
+          { label: '第2个', value: 2, hide: true },
+          { label: '第3个(第2个被隐藏了)', value: 3 }
+        ],
+        default: 1
+      }
+    }
   };
 
   constructor(private msg: NzMessageService) {}

packages/form/src/widgets/select/select.widget.html

@@ -36,7 +36,13 @@
     (nzScrollToBottom)="scrollToBottom()"
   >
     <ng-container *ngIf="!loading && !hasGroup">
-      <nz-option *ngFor="let o of data" [nzLabel]="o.label" [nzValue]="o.value" [nzDisabled]="o.disabled"></nz-option>
+      <nz-option
+        *ngFor="let o of data"
+        [nzLabel]="o.label"
+        [nzValue]="o.value"
+        [nzHide]="o.hide"
+        [nzDisabled]="o.disabled"
+      ></nz-option>
     </ng-container>
     <ng-container *ngIf="!loading && hasGroup">
       <nz-option-group *ngFor="let i of data" [nzLabel]="i.label">
@@ -45,6 +51,7 @@
           [nzLabel]="o.label"
           [nzValue]="o.value"
           [nzDisabled]="o.disabled"
+          [nzHide]="o.hide"
         ></nz-option>
       </nz-option-group>
     </ng-container>