feat(module:select): support setting status (#7478)

* feat(module:select): support setting status

* feat(module:select): add tests

components/select/demo/module

@@ -6,5 +6,6 @@ import { NzSpinModule } from 'ng-zorro-antd/spin';
 import { NzInputModule } from 'ng-zorro-antd/input';
 import { FormsModule } from '@angular/forms';
 import { HttpClientJsonpModule } from '@angular/common/http';
+import { NzSpaceModule } from 'ng-zorro-antd/space';
 
-export const moduleList = [ FormsModule, NzSpinModule, HttpClientJsonpModule, NzSelectModule, NzDividerModule, NzRadioModule, NzIconModule, NzInputModule ];
+export const moduleList = [ FormsModule, NzSpinModule, HttpClientJsonpModule, NzSelectModule, NzDividerModule, NzRadioModule, NzIconModule, NzInputModule, NzSpaceModule ];

components/select/demo/status.md

@@ -0,0 +1,15 @@
+---
+order: 24
+title:
+  zh-CN: 自定义状态
+  en-US: Status
+---
+
+## zh-CN
+
+使用 `nzStatus` 为 Select 添加状态，可选 `error` 或者 `warning`。
+
+## en-US
+
+Add status to Select with `nzStatus`, which could be `error` or `warning`.
+

components/select/demo/status.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-select-status',
+  template: `
+    <nz-space nzDirection="vertical" style="width: 100%">
+      <nz-select *nzSpaceItem nzStatus="error" style="width: 100%"></nz-select>
+      <nz-select *nzSpaceItem nzStatus="warning" style="width: 100%"></nz-select>
+    </nz-space>
+  `
+})
+export class NzDemoSelectStatusComponent {}

components/select/doc/index.en-US.md

@@ -51,6 +51,7 @@ import { NzSelectModule } from 'ng-zorro-antd/select';
 | `[nzShowArrow]` | Whether to show the drop-down arrow | `boolean` | `true`(for single select), `false`(for multiple select) |
 | `[nzShowSearch]` | Whether show search input in single mode. | `boolean` | `false` |
 | `[nzSize]` | Size of Select input | `'large' \| 'small' \| 'default'` | `'default'` |
+| `[nzStatus]` | Set validation status | `'error' \| 'warning'` | - |
 | `[nzSuffixIcon]` | The custom suffix icon | `TemplateRef<any> \| string` | - |  ✅ |
 | `[nzRemoveIcon]` | The custom remove icon | `TemplateRef<any>` | - |
 | `[nzClearIcon]` | The custom clear icon | `TemplateRef<any>` | - |

components/select/doc/index.zh-CN.md

@@ -52,6 +52,7 @@ import { NzSelectModule } from 'ng-zorro-antd/select';
 | `[nzShowArrow]` | 是否显示下拉小箭头 | `boolean` | 单选为 `true`，多选为 `false` |
 | `[nzShowSearch]` | 使单选模式可搜索 | `boolean` | `false` |
 | `[nzSize]` | 选择框大小 | `'large' \| 'small' \| 'default'` | `'default'` |
+| `[nzStatus]` | 设置校验状态 | `'error' \| 'warning'` | - |
 | `[nzSuffixIcon]` | 自定义的选择框后缀图标 | `TemplateRef<any> \| string` | - | ✅ |
 | `[nzRemoveIcon]` | 自定义的多选框清除图标 | `TemplateRef<any>` | - |
 | `[nzClearIcon]` | 自定义的多选框清空图标 | `TemplateRef<any>` | - |

components/select/select.component.ts

@@ -26,6 +26,7 @@ import {
   Optional,
   Output,
   QueryList,
+  Renderer2,
   SimpleChanges,
   TemplateRef,
   ViewChild,
@@ -40,8 +41,15 @@ import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/con
 import { NzNoAnimationDirective } from 'ng-zorro-antd/core/no-animation';
 import { cancelRequestAnimationFrame, reqAnimFrame } from 'ng-zorro-antd/core/polyfill';
 import { NzDestroyService } from 'ng-zorro-antd/core/services';
-import { BooleanInput, NzSafeAny, OnChangeType, OnTouchedType } from 'ng-zorro-antd/core/types';
-import { InputBoolean, isNotNil } from 'ng-zorro-antd/core/util';
+import {
+  BooleanInput,
+  NgClassInterface,
+  NzSafeAny,
+  NzStatus,
+  OnChangeType,
+  OnTouchedType
+} from 'ng-zorro-antd/core/types';
+import { getStatusClassNames, InputBoolean, isNotNil } from 'ng-zorro-antd/core/util';
 
 import { NzOptionGroupComponent } from './option-group.component';
 import { NzOptionComponent } from './option.component';
@@ -179,6 +187,7 @@ export class NzSelectComponent implements ControlValueAccessor, OnInit, AfterCon
 
   @Input() nzId: string | null = null;
   @Input() nzSize: NzSelectSizeType = 'default';
+  @Input() nzStatus?: NzStatus;
   @Input() nzOptionHeightPx = 32;
   @Input() nzOptionOverflowSize = 8;
   @Input() nzDropdownClassName: string | null = null;
@@ -254,6 +263,11 @@ export class NzSelectComponent implements ControlValueAccessor, OnInit, AfterCon
   focused = false;
   dir: Direction = 'ltr';
 
+  // status
+  prefixCls: string = 'ant-select';
+  statusCls: NgClassInterface = {};
+  hasFeedback: boolean = false;
+
   generateTagItem(value: string): NzSelectItemInterface {
     return {
       nzValue: value,
@@ -508,6 +522,7 @@ export class NzSelectComponent implements ControlValueAccessor, OnInit, AfterCon
     public nzConfigService: NzConfigService,
     private cdr: ChangeDetectorRef,
     private host: ElementRef<HTMLElement>,
+    private renderer: Renderer2,
     private platform: Platform,
     private focusMonitor: FocusMonitor,
     @Optional() private directionality: Directionality,
@@ -551,7 +566,7 @@ export class NzSelectComponent implements ControlValueAccessor, OnInit, AfterCon
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    const { nzOpen, nzDisabled, nzOptions } = changes;
+    const { nzOpen, nzDisabled, nzOptions, nzStatus } = changes;
     if (nzOpen) {
       this.onOpenChange();
     }
@@ -576,6 +591,9 @@ export class NzSelectComponent implements ControlValueAccessor, OnInit, AfterCon
       });
       this.listOfTemplateItem$.next(listOfTransformedItem);
     }
+    if (nzStatus) {
+      this.setStatusStyles();
+    }
   }
 
   ngOnInit(): void {
@@ -695,4 +713,16 @@ export class NzSelectComponent implements ControlValueAccessor, OnInit, AfterCon
     cancelRequestAnimationFrame(this.requestId);
     this.focusMonitor.stopMonitoring(this.host);
   }
+
+  private setStatusStyles(): void {
+    // render status if nzStatus is set
+    this.statusCls = getStatusClassNames(this.prefixCls, this.nzStatus, this.hasFeedback);
+    Object.keys(this.statusCls).forEach(status => {
+      if (this.statusCls[status]) {
+        this.renderer.addClass(this.host.nativeElement, status);
+      } else {
+        this.renderer.removeClass(this.host.nativeElement, status);
+      }
+    });
+  }
 }

components/select/select.spec.ts

@@ -12,7 +12,7 @@ import {
   ɵComponentBed as ComponentBed,
   ɵcreateComponentBed as createComponentBed
 } from 'ng-zorro-antd/core/testing';
-import { NzSafeAny } from 'ng-zorro-antd/core/types';
+import { NzSafeAny, NzStatus } from 'ng-zorro-antd/core/types';
 import { NzIconTestModule } from 'ng-zorro-antd/icon/testing';
 
 import { NzSelectSearchComponent } from './select-search.component';
@@ -1268,6 +1268,34 @@ describe('select', () => {
       expect(appRef.tick).toHaveBeenCalledTimes(0);
     });
   });
+  describe('status', () => {
+    let testBed: ComponentBed<TestSelectStatusComponent>;
+    let component: TestSelectStatusComponent;
+    let fixture: ComponentFixture<TestSelectStatusComponent>;
+    let selectElement!: HTMLElement;
+
+    beforeEach(() => {
+      testBed = createComponentBed(TestSelectStatusComponent, {
+        imports: [NzSelectModule, NzIconTestModule]
+      });
+      component = testBed.component;
+      fixture = testBed.fixture;
+      selectElement = testBed.debugElement.query(By.directive(NzSelectComponent)).nativeElement;
+    });
+
+    it('should classname correct', () => {
+      fixture.detectChanges();
+      expect(selectElement.classList).toContain('ant-select-status-error');
+
+      component.status = 'warning';
+      fixture.detectChanges();
+      expect(selectElement.classList).toContain('ant-select-status-warning');
+
+      component.status = '';
+      fixture.detectChanges();
+      expect(selectElement.classList).not.toContain('ant-select-status-warning');
+    });
+  });
 });
 
 @Component({
@@ -1558,3 +1586,10 @@ export class TestSelectReactiveTagsComponent {
   nzTokenSeparators: string[] = [];
   nzMaxTagPlaceholder?: TemplateRef<{ $implicit: NzSafeAny[] }>;
 }
+
+@Component({
+  template: ` <nz-select [nzStatus]="status"></nz-select> `
+})
+export class TestSelectStatusComponent {
+  status: NzStatus = 'error';
+}