diff --git a/components/tree-select/demo/module b/components/tree-select/demo/module index c896578d01..9e31c4d770 100644 --- a/components/tree-select/demo/module +++ b/components/tree-select/demo/module @@ -1,5 +1,7 @@ import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select'; import { NzIconModule } from 'ng-zorro-antd/icon'; import { FormsModule } from '@angular/forms'; +import { NzSpaceModule } from 'ng-zorro-antd/space'; -export const moduleList = [ FormsModule, NzTreeSelectModule, NzIconModule ]; + +export const moduleList = [ FormsModule, NzTreeSelectModule, NzIconModule , NzSpaceModule]; diff --git a/components/tree-select/demo/status.md b/components/tree-select/demo/status.md new file mode 100644 index 0000000000..aacb6372fa --- /dev/null +++ b/components/tree-select/demo/status.md @@ -0,0 +1,15 @@ +--- +order: 8 +title: + zh-CN: 自定义状态 + en-US: Status +--- + +## zh-CN + +使用 `nzStatus` 为 `TreeSelect` 添加状态，可选 `error` 或者 `warning`。 + +## en-US + +Add status to TreeSelect with `nzStatus`, which could be `error` or `warning`. + diff --git a/components/tree-select/demo/status.ts b/components/tree-select/demo/status.ts new file mode 100644 index 0000000000..3cddfdbf71 --- /dev/null +++ b/components/tree-select/demo/status.ts @@ -0,0 +1,31 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'nz-demo-tree-select-status', + template: ` + + + + + ` +}) +export class NzDemoTreeSelectStatusComponent { + value?: string; + nodes = []; +} diff --git a/components/tree-select/doc/index.en-US.md b/components/tree-select/doc/index.en-US.md index d5ab594f32..3ed2ee1f15 100755 --- a/components/tree-select/doc/index.en-US.md +++ b/components/tree-select/doc/index.en-US.md @@ -35,6 +35,7 @@ import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select'; | `[nzMultiple]` | Support multiple or not, will be `true` when enable `nzCheckable`. | `boolean` | `false` | | `[nzHideUnMatched]` | Hide unmatched nodes while searching | `boolean` | `false` | ✅ | | `[nzSize]` | To set the size of the select input | `'large' \| 'small' \| 'default'` | `'default'` | ✅ | +| `[nzStatus]` | Set validation status | `'error' \| 'warning'` | - | | | `[nzCheckable]` | Whether to show checkbox on the treeNodes | `boolean` | `false` | | `[nzCheckStrictly]` | Check treeNode precisely; parent treeNode and children treeNodes are not associated | `boolean` | `false` | | `[nzShowExpand]` | Show a Expand Icon before the treeNodes | `boolean` | `true` | | diff --git a/components/tree-select/doc/index.zh-CN.md b/components/tree-select/doc/index.zh-CN.md index 05c394e175..b7000b3e34 100755 --- a/components/tree-select/doc/index.zh-CN.md +++ b/components/tree-select/doc/index.zh-CN.md @@ -35,6 +35,7 @@ import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select'; | `[nzMultiple]` | 支持多选（当设置 nzCheckable 时自动变为true） | `boolean` | `false` | | `[nzHideUnMatched]` | 搜索隐藏未匹配的节点 | `boolean` | `false` | ✅ | | `[nzSize]` | 选择框大小 | `'large' \| 'small' \| 'default'` | `'default'` | ✅ | +| `[nzStatus]` | 设置校验状态 | `'error' \| 'warning'` | - | | | `[nzCheckable]` | 节点前添加 Checkbox 复选框 | `boolean` | `false` | | `[nzCheckStrictly]` | checkable 状态下节点选择完全受控（父子节点选中状态不再关联） | `boolean` | `false` | | `[nzShowExpand]` | 节点前添加展开图标 | `boolean` | `true` | | diff --git a/components/tree-select/tree-select.component.ts b/components/tree-select/tree-select.component.ts index 83814013f2..13bcd9a2a7 100644 --- a/components/tree-select/tree-select.component.ts +++ b/components/tree-select/tree-select.component.ts @@ -44,8 +44,16 @@ import { NzTreeNode, NzTreeNodeOptions } from 'ng-zorro-antd/core/tree'; -import { BooleanInput, NgStyleInterface, NzSizeLDSType, OnChangeType, OnTouchedType } from 'ng-zorro-antd/core/types'; -import { InputBoolean, isNotNil } from 'ng-zorro-antd/core/util'; +import { + BooleanInput, + NgClassInterface, + NgStyleInterface, + NzSizeLDSType, + NzStatus, + OnChangeType, + OnTouchedType +} from 'ng-zorro-antd/core/types'; +import { getStatusClassNames, InputBoolean, isNotNil } from 'ng-zorro-antd/core/util'; import { NzSelectSearchComponent } from 'ng-zorro-antd/select'; import { NzTreeComponent } from 'ng-zorro-antd/tree'; @@ -253,6 +261,7 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc @Input() nzDropdownStyle: NgStyleInterface | null = null; @Input() nzDropdownClassName?: string; @Input() @WithConfig() nzBackdrop = false; + @Input() nzStatus: NzStatus = ''; @Input() set nzExpandedKeys(value: string[]) { this.expandedKeys = value; @@ -285,6 +294,10 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc return this.nzTreeTemplate || this.nzTreeTemplateChild; } + prefixCls: string = 'ant-select'; + statusCls: NgClassInterface = {}; + nzHasFeedback: boolean = false; + dropdownClassName = TREE_SELECT_DEFAULT_CLASS; triggerWidth?: number; isComposing = false; @@ -370,8 +383,20 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc this.closeDropDown(); } + private setStatusStyles(): void { + // render status if nzStatus is set + this.statusCls = getStatusClassNames(this.prefixCls, this.nzStatus, this.nzHasFeedback); + Object.keys(this.statusCls).forEach(status => { + if (this.statusCls[status]) { + this.renderer.addClass(this.elementRef.nativeElement, status); + } else { + this.renderer.removeClass(this.elementRef.nativeElement, status); + } + }); + } + ngOnChanges(changes: SimpleChanges): void { - const { nzNodes, nzDropdownClassName } = changes; + const { nzNodes, nzDropdownClassName, nzStatus } = changes; if (nzNodes) { this.updateSelectedNodes(true); } @@ -379,6 +404,9 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc const className = this.nzDropdownClassName && this.nzDropdownClassName.trim(); this.dropdownClassName = className ? `${TREE_SELECT_DEFAULT_CLASS} ${className}` : TREE_SELECT_DEFAULT_CLASS; } + if (nzStatus) { + this.setStatusStyles(); + } } writeValue(value: string[] | string): void { diff --git a/components/tree-select/tree-select.spec.ts b/components/tree-select/tree-select.spec.ts index d81879092a..96c7cd91ea 100644 --- a/components/tree-select/tree-select.spec.ts +++ b/components/tree-select/tree-select.spec.ts @@ -16,6 +16,7 @@ import { typeInElement } from 'ng-zorro-antd/core/testing'; import { NzTreeNode, NzTreeNodeOptions } from 'ng-zorro-antd/core/tree'; +import { NzStatus } from 'ng-zorro-antd/core/types'; import { NzTreeSelectComponent } from './tree-select.component'; import { NzTreeSelectModule } from './tree-select.module'; @@ -33,7 +34,8 @@ describe('tree-select component', () => { NzTestTreeSelectBasicComponent, NzTestTreeSelectCheckableComponent, NzTestTreeSelectFormComponent, - NzTestTreeSelectCustomizedIconComponent + NzTestTreeSelectCustomizedIconComponent, + NzTestTreeSelectStatusComponent ], providers: [ { @@ -606,6 +608,29 @@ describe('tree-select component', () => { expect(overlayContainerElement.querySelector('i.anticon.anticon-frown-o')).toBeTruthy(); })); }); + + describe('Status', () => { + let fixture: ComponentFixture; + let treeSelect: DebugElement; + + beforeEach(() => { + fixture = TestBed.createComponent(NzTestTreeSelectStatusComponent); + treeSelect = fixture.debugElement.query(By.directive(NzTreeSelectComponent)); + }); + + it('should className correct', () => { + fixture.detectChanges(); + expect(treeSelect.nativeElement.className).toContain('ant-select-status-error'); + + fixture.componentInstance.status = 'warning'; + fixture.detectChanges(); + expect(treeSelect.nativeElement.className).toContain('ant-select-status-warning'); + + fixture.componentInstance.status = ''; + fixture.detectChanges(); + expect(treeSelect.nativeElement.className).not.toContain('ant-select-status-warning'); + }); + }); }); @Component({ @@ -863,3 +888,41 @@ export class NzTestTreeSelectCustomizedIconComponent { }) ]; } + +@Component({ + template: ` + + ` +}) +export class NzTestTreeSelectStatusComponent { + status: NzStatus = 'error'; + value?: string = '1001'; + nodes = [ + { + title: 'parent 1', + key: '100', + children: [ + { + title: 'parent 1-0', + key: '1001', + children: [ + { title: 'leaf 1-0-0', key: '10010', isLeaf: true }, + { title: 'leaf 1-0-1', key: '10011', isLeaf: true } + ] + }, + { + title: 'parent 1-1', + key: '1002', + children: [{ title: 'leaf 1-1-0', key: '10020', isLeaf: true }] + } + ] + } + ]; +}